AngularJS 1.2 - ngAnimate 不工作答案

【问题标题】：AngularJS 1.2 - ngAnimate not workingAngularJS 1.2 - ngAnimate 不工作
【发布时间】：2013-10-16 01:56:29
【问题描述】：

我不熟悉在 AngularJS 1.2 中使用 ng-animate。我不确定为什么我的 ng-animate 不能使用某个类名，而是使用默认值来实现我在示例中看到的简单淡入淡出。

在这个例子中，我尝试将我的 ng-animate 类设置为“动画”： http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

但是当我使用默认值时，我的动画类名只是“.ng-enter”和“.ng-leave”，动画的淡入淡出似乎工作正常。

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

任何帮助将不胜感激，谢谢！

【问题讨论】：

Dan Wahlin 在被问及他的意见时提到了这篇文章。看看吧。

标签： angularjs angularjs-ng-repeat ng-animate

【解决方案1】：

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

在 1.2 中，您使用特殊的命名约定来定义适当的 CSS 类。如果您想要一个特定的名称，例如“动画”，您需要将该类添加到您想要动画的元素中。

只要您有正确的 CSS 类，一些指令就会自动生成动画。哪些可以在这里找到：http://docs.angularjs.org/api/ngAnimate

这就是您的动画在您的第二个示例中仅定义“.ng-enter”类时起作用的原因。然而，这会自动为所有支持 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

【讨论】：

这是有效的语法！我正在使用 bootstrap-angular-ui 的警报，这会使传入的警报淡入。当我单击关闭时，它会淡出。我实际上希望警报只显示出来，然后在一段时间后移到屏幕左侧。之后，将其从 dom 中删除，或者最好调用控制器函数。知道如何处理 dom 移除部分吗？
取决于您的用例。如果您使用ng-repeat，当您从关联的集合中删除它时，它将自动从 DOM 中删除。示例：plnkr.co/edit/Kp1CjzxYEbVZjvtXyUCO?p=preview

【解决方案2】：

记住将动画模块作为依赖项添加到模块定义中也很重要。以防万一其他人在动画工作时遇到问题并且没有这样做。

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

【讨论】：

【解决方案3】：

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

【讨论】：

感谢您发布此信息！！！我使用 npm 安装 angular-animate 并安装了 1.5 beta 版本。在用 1.3.8 版本动画替换该版本后，我开始为我工作。
@GaryEberhart ：很高兴为您提供帮助！
谢谢伙计。有 1.5.3 的动画和 1.5.0 的角度......真是浪费时间

【解决方案4】：

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

完整详情请查看Apply Angularjs Animation in 2 minutes

【讨论】：

【解决方案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

【讨论】：