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;
}

普朗克: http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=preview