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

非常感谢您提供任何帮助！谢谢！

- changus

---

当被要求提供意见时，丹·沃林参考了这篇文章。请看一下。 - Chandu

Answer 1

在1.2版本中，ng-animate属性已被弃用。

现在你需要使用特殊的命名规则来定义适当的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

Plunker是一个在线的代码编辑器和开发环境，特别适用于Web开发。您可以在其中创建、编辑和共享Web应用程序，并实时查看其运行情况。此外，Plunker还支持多种框架和库，如AngularJS、React、jQuery等。

- tasseKATT

---

这是正常的语法！我正在使用bootstrap-angular-ui的alert，这将使传入的警报淡入。当我点击关闭时，它会淡出。实际上，我希望警报只是显示出来，然后在一定时间后向左移动到屏幕外。之后，将其从dom中删除，或者最好调用一个控制器函数。有什么想法如何处理dom删除部分？ - RedRoosterMobile

取决于您的使用情况。如果您正在使用 ng-repeat , 当从关联集合中删除时，它将自动从DOM中删除。 例如：http://plnkr.co/edit/Kp1CjzxYEbVZjvtXyUCO?p=preview - tasseKATT

Answer 2

同样重要的是记得将动画模块添加为依赖项到您的模块定义中。以防其他人在尝试使用动画时遇到问题并且没有执行此操作。

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

- Ben

Answer 3

您必须检查angular.min.js的版本是否与angular-animate.min.js的版本匹配。
以下是我解决此问题的方法。

- SANGEET MANGHNANI

---

谢谢您发布这个问题！！！我使用npm安装了angular-animate，但它安装了一个1.5 beta版本。在将该版本替换为1.3.8版本后，动画开始正常工作。 - Gary Eberhart

@GaryEberhart：很高兴能帮忙！！ - SANGEET MANGHNANI

谢谢，我之前用的是Animate 1.5.3和Angular 1.5.0...浪费了好多时间。 - Alteyss

Answer 4

这是补充已接受的答案，对于那些试图使用 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和ng-leave-active。例如，ng-show指令在动画开始时添加ng-hide-remove，在结束时添加ng-hide-remove-active。有关更多详细信息，请访问此链接： https://www.w3schools.com/angular/angular_animations.asp

- Dipendu Paul

Answer 5

正如Tasse所说，ng-animate已经被弃用，我们需要使用class。 如果您正在从angularjs网站http://www.nganimate.org/angularjs/ng-repeat/move复制CSS，则需要按特定格式修改这些CSS

有关完整详细信息，请查看在2分钟内应用Angularjs动画

- Ali Adravi