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的版本匹配。
我这样修好了。

Answer 4

由于Tasse说ng-animate已被弃用，我们需要使用该类。如果您要从angularjs网站http://www.nganimate.org/angularjs/ng-repeat/move复制CSS，那么您需要以特定格式修改这些CSS

有关详细信息，请参阅Apply Angularjs Animation in 2 minutes

Answer 5

对于那些尝试使用ng-show指令设置元素动画的人来说，这是对已接受答案的补充。这些是必须使用的样式：

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

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

请注意，并非所有角度指令都添加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

AngularJS 1.2 - ngAnimate无效

5 个答案: