Question

我无法理解如何让我的ngAnimate使用此视图：

http://plnkr.co/edit/5eW6aN?p=preview

我期待包含单词“Link”的链接使灰色框滑出。

感谢您的帮助。

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

NgAnimate不工作 - Angular

1 个答案: