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

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

Ответ 1

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

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

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

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

Я обновил ваш первый пример, чтобы он работал с классом с именем 'animation':

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

Ответ 2

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

angular.module('myApp', ['ngAnimate']);

Ответ 3

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

Ответ 4

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

Для полной проверки детали Применить анимацию Angularjs за 2 минуты

Ответ 5

Это в дополнение к принятому ответу, для тех, кто пытается анимировать элемент с директивой 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