24

我是使用 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

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

4

5 回答 5

77

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

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

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

这就是在定义“.ng-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

于 2013-10-17T07:50:13.117 回答
14

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

angular.module('myApp', ['ngAnimate']);
于 2015-08-22T17:47:06.510 回答
9

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

于 2015-09-15T18:13:50.850 回答
0

对于那些试图用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

于 2017-09-29T05:01:54.397 回答
0

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

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

于 2015-07-23T23:04:01.130 回答