Question

我跟着this tutorial试图在我的应用中实现动画。但由于某种原因，我无法做到这一点。 Here is the planker我做过。

以下是我添加ng-animate属性的方法：

<li ng-repeat="item in items" class="{enter:'animated bounceIn',leave:'animated bounceOut'}">{{item}}</li>

注意：我正在使用animate.css。

有人可以指出我做错了什么吗？

Answer 1

您的动画不起作用，因为Angular会将一些类应用于动画的元素，例如：ng-enter，ng-leave等。所以，我们只需要将它们与动画：

以下是一个例子：

<style>
 li.ng-enter {
-webkit-animation: bounceIn 0.5s;
animation: bounceIn 0.5s;
 }
 li.ng-leave {
   -webkit-animation: bounceOut 0.5s;
animation: bounceOut 0.5s;

 }
 </style>

在你的html某处：

<li ng-repeat="item in items"  >{{item}}</li>

演示：http://plnkr.co/edit/c8uvhQXtXgdfsEHRo9P6?p=preview

angular documentation列出了它使用的类。

ng-animate无法使用animate.css

1 个答案: