AngularJS 1.2 – ngAnimate не работает

Я новичок в использовании ng-animate с AngularJS 1.2. Я не уверен, почему мой ng-animate не работает с определенным именем класса, но работает со значением по умолчанию для простого затухания, которое я видел в примере.

В этом примере я пытаюсь установить для своего класса ng-animate значение «анимация»: http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

но когда я использую значение по умолчанию, а мое имя класса для анимации просто «.ng-enter» и «.ng-leave», анимация затухания работает нормально.

http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=preview

Любая помощь будет принята с благодарностью, спасибо!


angularjs angularjs-ng-repeat ng-animate
person changus    schedule 16.10.2013    source источник
comment
Дэн Уолин сослался на эту статью, когда его спросили о его вкладе. Посмотри.   -  person Chandu    schedule 18.10.2013

Ответы (5)


arrow_upward
77
arrow_downward

Атрибут ng-animate устарел в версии 1.2.

В версии 1.2 вы определяете соответствующие классы CSS, используя специальное соглашение об именах. Если вам нужно конкретное имя, например «анимация», вам нужно добавить этот класс к элементу, который вы хотите анимировать.

Если у вас есть правильные классы CSS, некоторые директивы будут анимированы автоматически. Какие из них можно найти здесь: http://docs.angularjs.org/api/ngAnimate.

По этой причине ваша анимация работает во втором примере, когда вы просто определяете класс «.ng-enter». Однако это автоматически анимирует все директивы, поддерживающие анимацию ввода.

Я обновил ваш первый пример, чтобы он работал с классом с именем «анимация»:

HTML:

<li ng-repeat="item in items" class="animation">{{item}}</li>

CSS (селекторы не сгруппированы для ясности):

.animation {
  -webkit-transition: 1s;
}

.animation.ng-enter {
  opacity: 0;
}

.animation.ng-leave {
  opacity: 1;
}

.animation.ng-enter.ng-enter-active {
  opacity: 1;
}

.animation.ng-leave.ng-leave-active {
  opacity: 0;
}

Plunker: http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=preview

person tasseKATT    schedule 17.10.2013
comment
Это рабочий синтаксис! Я использую предупреждение bootstrap-angular-ui, и это приводит к исчезновению входящего предупреждения. Когда я нажимаю закрыть, он исчезает. На самом деле я хочу, чтобы предупреждение просто появлялось, а затем перемещалось влево от экрана через определенное время. И после этого удалите его из дома или лучше всего вызовите функцию контроллера. Любая идея, как подойти к части удаления дома? - person RedRoosterMobile; 09.10.2014
comment
Зависит от вашего варианта использования. Если вы используете ng-repeat, он будет автоматически удален из DOM, когда вы удалите его из связанной коллекции. Пример: plnkr.co/edit/Kp1CjzxYEbVZjvtXyUCO?p=preview - person tasseKATT; 10.10.2014

arrow_upward
14
arrow_downward

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

angular.module('myApp', ['ngAnimate']);
person Ben    schedule 22.08.2015

arrow_upward
9
arrow_downward

Вы должны убедиться, что версия вашего angular.min.js совпадает с версией angular-animate.min.js.
Я исправил свою так.

person SANGEET MANGHNANI    schedule 15.09.2015
comment
Спасибо за публикацию!!! Я использовал npm для установки angular-animate, и он установил бета-версию 1.5. После замены этой версии на версию 1.3.8 у меня заработала анимация. - person Gary Eberhart; 24.09.2015
comment
@GaryEberhart: рад помочь!! - person SANGEET MANGHNANI; 04.12.2015
comment
Спасибо чувак. Было 1.5.3 для анимации и 1.5.0 для углового... Какая пустая трата времени - person Alteyss; 31.03.2016

arrow_upward
0
arrow_downward

Как сказал Тассе, ng-animate устарел, нам нужно использовать класс. Если вы копируете CSS с веб-сайта angularjs http://www.nganimate.org/angularjs/ng-repeat/move, тогда вам нужно изменить эти CSS в определенном формате

Для получения полной информации см. Применить анимацию Angularjs за 2 минуты

person Ali Adravi    schedule 23.07.2015

arrow_upward
0
arrow_downward

Это в дополнение к принятому ответу для тех, кто пытается анимировать элемент с помощью директивы ng-show. Вот стили, которые необходимо использовать:

.animation.ng-hide-remove {
  transition:2s linear all;
  opacity:0;
}

.animation.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

Обратите внимание, что не все директивы angular добавляют ng-enter, ng-enter-active, ng-leave and ng-leave-active. Например, директива ng-show добавляет ng-hide-remove в начало анимации и ng-hide-remove-active в ее конец. Для получения более подробной информации перейдите по этой ссылке: https://www.w3schools.com/angular/angular_animations.asp

person Dipendu Paul    schedule 29.09.2017