ng-animate无法使用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

角度文档列出了它使用的类。