AngularJS 1.2 - ngAnimate无效

Question

我是AngularJS 1.2使用ng-animate的新手.我不确定为什么我的ng-animate不能使用某个类名,但是我在一个例子中看到的默认为简单淡入淡出.

在这个例子中,我尝试将我的ng-animate类设置为'animation':http: //plnkr.co/edit/QWQUUVdcLmzLKRvVibqN？p = preview

但是当我使用默认值时,我的动画类名称只是".ng-enter"和".ng-leave",动画中的淡入淡出似乎工作正常.

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

任何帮助将不胜感激,谢谢!

Answer 1

ng-animate属性在1.2中已弃用.

在1.2中,您使用特殊的命名约定定义适当的CSS类.如果您想要一个特定的名称,例如"animation",则需要将该类添加到要设置动画的元素中.

只要你有正确的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

Answer 2

同样重要的是要记住将动画模块添加为模块定义的依赖项.以防万一其他人在制作动画时遇到问题并且没有这样做.

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

Answer 3

您必须检查angular.min.js的版本是否与angular-animate.min.js的版本匹配.
我这样修好了.