Эффект скольжения вверх / вниз с помощью ng-show и ng-animate

я пытаюсь использоватьng-animate чтобы получить поведение, похожее на JQuery'sslideUp() а такжеslideDown(), Только я'я бы лучше использовал "ng-show

я смотрю на учебник ng-animate здесь -http://www.yearofmoo.com/2013/04/animation-in-angularjs.html,

и я могу воспроизвести эффект постепенного появления / исчезновения в приведенном примере.

Как я могу изменить CSS, чтобы получить поведение слайд вверх / вниз? Также, если возможно, этолучше, что CSS не делаетне знаю о высоте компонента в пикселях. Таким образом, я могу повторно использовать CSS для разных элементов.

 Bruno Croys Felthes24 мая 2013 г., 18:35
Вы можете попробовать использоватьline-height атрибут css, от 0 до 100%. Иногда этоs работает ... Разместите свою скрипку, чем мы можем помочь вам лучше. Если вы найдете хороший способ сделать это, пожалуйста, пришлите мне его, чтобы разместить этот образец на моем сайте:AngularJS Ng-Animate
 Alex Figueiredo21 июн. 2013 г., 19:25
Проверь этоnganimate.orgI»
 Jonathan Palumbo21 мая 2013 г., 21:19
Моя ошибка, я не использовал ng-animate. Похоже, что они работают в сочетании друг с другом.
 Tony Lâmpada21 мая 2013 г., 21:07
Спасибо Джонатан. Я думаю ты'ошибаюсь Данный пример делает именно это: комбинация ng-show и ng-animate (ищите "Анимация ngShow & ngHide»). В любом случае, то, что я хочу, это просто эффект, чтобы показать / скрыть div, скользящий вверх и вниз.
 Jonathan Palumbo21 мая 2013 г., 20:56
Я не думаю, что вы сможете получить нг-шоу для обработки анимации. Это не его предполагаемое использование. Вот для чего нг-анимация. Почему вы хотите использовать ng-show специально?

Ответы на вопрос(8)

обновление дляУгловой 1.2+ (v1.2.6 на момент написания этого поста) :(

.stuff-to-show {
  position: relative;
  height: 100px;
  -webkit-transition: top linear 1.5s;
  transition: top linear 1.5s;
  top: 0;
}
.stuff-to-show.ng-hide {
  top: -100px;
}
.stuff-to-show.ng-hide-add,
.stuff-to-show.ng-hide-remove {
  display: block!important;
}

plunker)

 Flame_Phoenix25 нояб. 2015 г., 17:23
Также работает на Angular 1.4. Протестировано и работает как шарм!
 Michael Tempest02 мая 2014 г., 11:10
Дон»Оживите верхнюю позицию с помощью css, она очень медленная и занимает много памяти. Вместо этого используйте перевод.

Вы должны использовать анимацию Javascript для этого - это невозможно в чистом CSS, потому что вы можете 'не знаю высоты любого элемента. Следуйте инструкциям по внедрению анимации javascript и скопируйте slideUp и slideDown из jQuery.источник.

Эта анимация на основе классов Javascript работает в AngularJS 1.2 (и тестировалась в версии 1.4)

редактироватьЯ отказался от этого кода и пошел в совершенно другом направлении. мне нравитсямой другой ответ намного лучше, Этот ответ даст вам некоторые проблемы в определенных ситуациях.

myApp.animation('.ng-show-toggle-slidedown', function(){
  return {
    beforeAddClass : function(element, className, done){
        if (className == 'ng-hide'){
            $(element).slideUp({duration: 400}, done);
        } else {done();}
    },
    beforeRemoveClass :  function(element, className, done){
        if (className == 'ng-hide'){
            $(element).css({display:'none'});
            $(element).slideDown({duration: 400}, done);
        } else {done();}
    }
}

});

Просто добавьте.ng-hide-toggle-slidedown класса к элементу контейнера, и поведение jQuery для скольжения будет реализовано на основе класса ng-hide.

Вы должны включить$(element).css({display:'none'}) линия вbeforeRemoveClass метод, потому что jQuery не будет выполнять slideDown, если элемент не находится в состоянииdisplay: none до запуска анимации jQuery. AngularJS использует CSS

.ng-hide:not(.ng-hide-animate) {
    display: none !important;
}

скрыть стихию jQuery не знает об этом состоянии, и jQuery потребуетсяdisplay:none до первого слайда вниз анимации.

Анимация AngularJS добавит.ng-hide-animate а также.ng-animate классы в то время как анимация происходит.

 NoOne02 апр. 2016 г., 23:59
@steampowered Это будет / не может работать сngIf, Но я также вижу, что он не работает в некоторых случаях, даже когда вы используетеngShow, Например. кажется, что это нене работает, когда я использую его в модале, созданном с помощью UI-Bootstrap. Это странно Когда это не удалось для вас?
 zai chang20 авг. 2015 г., 17:11
Это прекрасно работает для меня, пока я нене в состоянии заставить другие ответы работать хорошо для меня. Up-голосовали!
 steampowered20 авг. 2015 г., 21:06
@zaichang Я отказался от этого кода и пошел в совершенно другом направлении. мне нравится мойдругой ответ гораздо лучше, Этот ответ даст вам некоторые проблемы в определенных ситуациях.
 Brett Green09 дек. 2016 г., 15:42
дисплей: ничего не получилось ... с помощью ng-animate / ng-show с функциями ввода / вывода и эффектов переключения пользовательского интерфейса jquery. Nothign работал правильно, пока я не добавил отображение: ни один элемент ... спасибо!

Какие'неправильно с фактическим использованиемng-animate заng-show как вы упомянули?




    var app=angular.module('ang_app', ['ngAnimate']);
    app.controller('ang_control01_main', function($scope) {

    });


    #myDiv {
        transition: .5s;
        background-color: lightblue;
        height: 100px;
    }
    #myDiv.ng-hide {
        height: 0;
    }


    
    

 Waruyama26 июл. 2016 г., 11:32
Это работает, если вы можете жестко кодировать высоту в своем CSS, но это часто невозможно.

Это можетна самом деле быть сделано в CSS и очень минимальный JS, просто добавив класс CSS (неустановить стили непосредственно в JS!), например,ng-clickсобытие. Принцип в том, что можнооживитьheight: 0; вheight: auto; но это можно обмануть, ожививmax-height имущество. Контейнер будет расширяться до его "авто-высота» значение, когда.foo-open установлен - нет необходимости фиксированной высоты или позиционирования.

.foo {
    max-height: 0;
}

.foo--open {
    max-height: 1000px; /* some arbitrary big value */
    transition: ...
}

увидетьэта скрипка от превосходной Леа Веру

В качестве замечания, поднятого в комментариях, обратите внимание, что хотя эта анимация прекрасно работает с линейным замедлением, любое экспоненциальное замедление будет приводить к поведению, отличному от того, что можно было бы ожидать - из-за того, что свойство animated являетсяmax-height и неheight сам; в частности, толькоheight доля кривой ослабленияmax-height будет отображаться.

 Luca01 апр. 2016 г., 16:34
@MarcieKaiseroverflow: hidden; исправляет - смотрите обновленную ссылку
 RushPL02 апр. 2015 г., 21:41
Тот'Плохо, потому что скорость анимации меняется в зависимости от.max-height
 Luca08 апр. 2015 г., 16:53
Мы добавили мой ответ, чтобы доказать, что это может быть достигнуто с помощью чистого CSS (без js) и без фиксирования или беспокойства о высоте элемента. По вопросу ОП:Это'лучше, что CSS не делаетне знаю о высоте компонента в пикселях " - онздесь не спрашивают об ослаблении. Я'Я, конечно, не принимаю это на свой счет, но, хотя технически вы правы в отношении других типов смягчения, я нене думаю, что мой ответ такплохой' или же 'неправильно' быть подавленным.
 windmaomao23 июн. 2015 г., 18:41
Я должен проголосовать за этот подход. Простой, а также с использованием фреймворка ngAnimate.
 RushPL09 апр. 2015 г., 17:49
Что ж, пока я начал исследовать это, у меня сложилось впечатление, что это решение - «серебряная пуля», поэтому, если сформулировать это иначе (включая недостатки), я бы изменил свой голос. Обратите внимание, чтоslideUp а такжеslideDown в вопросе обычно делается с некоторым ослаблением.
 Erik Grosskurth05 апр. 2016 г., 04:27
Это должно быть отмечено ответом, так как меня привели сюда в поисках способа обмануть высоту: auto, как и оригинальный постер, был
 Luca28 июл. 2016 г., 17:06
@ Hirshy это правда, на самом деле, в CSS нет пуленепробиваемого решения, но оно отлично работает в определенных контекстах (и мы нене знаю, в каком из них будет использовать ОП)
 Hirshy27 июл. 2016 г., 20:40
Это решение может вызвать проблемы, когда содержимое больше, чем разрешеноmax-height, В таком случае нижняя часть содержимого будет обрезанаoverflow: hidden, Увеличениеmax-height ISN»Это отличное решение, потому что когда содержимое намного меньше, анимация получается очень резкой. Например, если анимация до максимальной высоты 2000px, но высота div равна 200px, это 'Завершу анимацию в 1/10 времени.
 Luca07 апр. 2015 г., 12:54
почему этоплохой? Если у вас есть проблемы со скоростью анимации, просто установите длительность перехода на разумное значение, основанное наmax-height, Это'точно, как переходы должны работать. Этот метод на самом деле имеет то преимущество, что скорость скольжения / падения остается постоянной независимо отheight
 RushPL08 апр. 2015 г., 16:44
Хорошо работает только при линейном ослаблении. Со всеми другими облегчениями вы получаете толькоheight/maxHeight часть кривой. Опыт плохой.
 Marcie Kaiser01 апр. 2016 г., 15:57
Если вы измените цвет текста на черный на скрипке, вы увидите, что он нена самом деле скрыть содержимое. Ты просто не могЯ не вижу его, пока вы не зависли, потому что текст был белым.
 Luca10 апр. 2015 г., 12:43
@RushPL это справедливое объяснение - теперь оно имеет смысл.

Это на самом деле довольно легко сделать. Все, что вам нужно сделать, это изменить CSS.

Вот's скрипка с очень простой анимацией затухания:http://jsfiddle.net/elthrasher/sNpjH/

Чтобы превратить его в скользящую анимацию, я сначала должен был поместить свой элемент в поле (этоЭто слайд-контейнер), затем я добавил еще один элемент, чтобы заменить тот, который уходил, просто потому, что я думал, что это будет хорошо выглядеть. Уберите это, и пример все еще будет работать.

Я изменил анимацию CSS из 'замирания» кгорка' но, пожалуйста, обратите внимание, что это имена, которые я дал. Я мог бы написать анимацию слайдов CSS с именем "замирания» или что-нибудь еще в этом отношении.

Важной частью является то, чтоs в css. Вот'оригиналзамирания» CSS:

.fade-hide, .fade-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.fade-hide {
    opacity:1;
}
.fade-hide.fade-hide-active {
    opacity:0;
}
.fade-show {
    opacity:0;
}
.fade-show.fade-show-active {
    opacity:1;
}

Этот код изменяет непрозрачность элемента с 0 (полностью прозрачный) до 1 (полностью непрозрачный) и обратно. Решение состоит в том, чтобы оставить прозрачность в покое и вместо этого изменить верхнюю (или левую, если вы хотите переместить влево-вправо) .I '

.slide-hide, .slide-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}
.slide-hide {
    position: relative;
    top: 0;
}
.slide-hide.slide-hide-active {
    position: absolute;
    top: -100px;
}
.slide-show {
    position: absolute;
    top: 100px;
}
.slide-show.slide-show-active {
    position: relative;
    top: 0px;
}

m также изменяется от относительного к абсолютному позиционированию, поэтому только один из элементов одновременно занимает место в контейнере.

Вот'S готовый продукт:http://jsfiddle.net/elthrasher/Uz2Dk/, Надеюсь это поможет!

 ericpeters0n01 апр. 2014 г., 02:13
Это было очень полезно. Я'я пытаюсь выяснить, почемускрывать' Переход так внезапен в твоей скрипке, @elthrasher
 nikk wong10 июл. 2015 г., 03:04
Поведение немного странное. Иногда текст появляется сверху, а иногда снизу.
 GMaiolo18 янв. 2016 г., 01:10
Я знаю это'это старый ответ, но если кто-то хочет попробовать это, яЯ хотел бы уточнить, что с помощьюng-hide="hidden == false" является избыточным, еслиhidden переменная уже логическая, тогда оператор вообще не нужен.
 elthrasher04 апр. 2014 г., 02:36
@ ericpeters0n - это 'из-за этого 0,5 с в конце переходной линии. Тот's количество времени этовозьму, полсекунды в этом случае. Вы можете установить это на то, что вам нравится. Попробуйте 5 или 10 с.

Я отказался от кода для моегодругой ответ на этот вопрос и вместо этого идти с этим ответом.

Я считаю, что лучший способ сделать это - не использоватьng-show а такжеng-animate совсем.

/* Executes jQuery slideDown and slideUp based on value of toggle-slidedown 
   attribute.  Set duration using slidedown-duration attribute.  Add the 
   toggle-required attribute to all contained form controls which are
   input, select, or textarea.  Defaults to hidden (up) if not specified
   in slidedown-init attribute.  */
fboApp.directive('toggleSlidedown', function(){
    return {
        restrict: 'A',
        link: function (scope, elem, attrs, ctrl) {
            if ('down' == attrs.slidedownInit){
                elem.css('display', '');
            } else {
                elem.css('display', 'none');
            }
            scope.$watch(attrs.toggleSlidedown, function (val) {
                var duration = _.isUndefined(attrs.slidedownDuration) ? 150 : attrs.slidedownDuration;
                if (val) {
                    elem.slideDown(duration);
                } else {
                    elem.slideUp(duration);
                }
            });
        }
    }
});
 tanguy_k20 окт. 2015 г., 13:10
Вы должны были изменить свой предыдущий ответ вместо того, чтобы создавать новый (представьте себе беспорядок, если все создают новый ответ каждый раз, когда хотят что-то изменить ...)
 steampowered21 окт. 2015 г., 00:13
@tanguy_k Я думаю, что может быть способ исправить первый ответ, и, возможно, оба подхода верны. Думаю, я надеялся, что кто-то раскритиковал мой первый ответ и сказал, почему он иногда терпит неудачу. Я думаю, что может быть несколько одинаково хороших ответов на этот вопрос.
 Brett Green09 дек. 2016 г., 15:44
Проблема с редактированием исходного ответа заключается в том, что, если спрашивающий пометил это какправильный' а потом вы делаете значительные моды ... это тоже кажется плохой идеей.
 zai chang25 авг. 2015 г., 13:19
Спасибо за предоставление более нового решения. Из любопытства (как я нене может найти каких-либо особых проблем с переключением с ng-hide / ng-show) ... в чем была проблема с этим подходом?
Решение Вопроса

мы написали угловую директиву, которая делаетslideToggle() без jQuery.

https://github.com/EricWVGG/AngularSlideables

 BastienSander12 июн. 2014 г., 10:01
@JayKlehr: спасибо за ответ, интересно посмотреть.
 Marcio07 апр. 2015 г., 09:27
ИдентификаторЭто как-то нужно (если вы хотите удалить элемент, который находится где-то еще), поэтому я сделал небольшую модификацию, исправляющую некоторые ошибки, и теперь она работает как шарм.plnkr.co/edit/XdRjap3TPFEC9180yq9k?p=preview
 jbodily25 мар. 2016 г., 02:05
Я знаю, что мыЯ забил это до смерти, но мне нравится связывать видимость с переменными. Кроме того, это решение неt позволяют встроенные ползунки. Я'мы создали скрипку, которая делает оба:jsfiddle.net/rh7z7w0a/2
 Darren09 сент. 2015 г., 08:56
Не обращайте внимания на комментарии к plnkr, они ничего не предлагают по сравнению с версией Erics github. Это очень удобно, спасибо.
 BastienSander10 июн. 2014 г., 12:00
Вы говорите, что директива без jQuery, но методыduration easing css bind JQuery One 'с, нет? (может я'м неправильно)
 Jay Klehr11 июн. 2014 г., 22:33
@BastienSander Angular предоставляет подмножество некоторых Jquery 'методы, если вы неt, включая jquery, перед тем как включить Angular, api docs для этого здесь:docs.angularjs.org/api/ng/function/angular.element  .css и .bind предоставляются там (который используется наэлемент" переменная). Свойства замедления и длительности нет используется на элементе, поэтому онине ссылаются на методы Jquery с тем же именем, но являются свойствами, передаваемыми в атрибутах HTML (объект attrs).
 Tony Lâmpada02 нояб. 2013 г., 11:49
Это выглядит так же, как я хотел. Спасибо!
 Pylinux09 дек. 2014 г., 09:04
Самый минимальныйаккордеон» Слайдер стиля, который я когда-либо видел! Спасибо! Мы немного изменили его, чтобы удалить идентификаторы и классные вещи, которые мы сочли ненужными, так как мы могли найти элементы без идентификаторов:plnkr.co/edit/11NIZqB3G3KYKI0OChGA?p=preview
 Riley Lark30 нояб. 2013 г., 20:55
Большое спасибо, похоже на отличную директиву

Ваш ответ на вопрос