ng-animate not working with animate.css

Question

我遵循本教程试图在我的应用程序中实现动画。但由于某种原因，我不能这样做。这是我做的木板。

下面是我如何添加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文档列出了它使用的类。