NG-动画与animate.css工作 [英] ng-animate not working with animate.css

问题描述

我按照本教程努力实现我的动画应用程序。但由于某些原因，我不能这样做。 这里是我所做的拖板。

I have followed this tutorial trying to implement animation in my app. But for some reason I cant do it. Here is the planker I have made.

下面是如何我加入了NG-动画属性：

Here is how I am adding the ng-animate attribute:

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

注意：我使用的 animate.css 。

有人能指出我究竟做错了什么？

Can someone point out what am I doing wrong?

推荐答案

您动画不工作，因为角适用于一些类为动画的元素，例如： NG-输入， NG-休假等，所以，我们只需要在动画连线这些了：

Your animations aren't working because Angular applies some classes to the elements for the animations such as: ng-enter, ng-leave, etc. So, we just need to wire these up with the animations:

下面是一个例子：

<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的地方：

In your html somewhere:

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

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

角文档列出它的用途。班

这篇关于NG-动画与animate.css工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！