ng-animate not working with animate.css
ng-animate not working with animate.css
我遵循本教程试图在我的应用程序中实现动画。但由于某种原因,我不能这样做。这是我做的木板。
下面是我如何添加ng-animate属性:<li ng-repeat="item in items" class="{enter:'animated bounceIn',leave:'animated bounceOut'}">{{item}}</li>
注意:我使用的是animate.css。
谁能指出我做错了什么?
你的动画不工作,因为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文档列出了它使用的类。
相关文章:
- 关于使用Animate.css向和项添加和删除动画类的问题
- 添加animate.css类,然后使用remove移除元素
- jQuery+Animate.css动画只工作一次,动画不会重置
- 使用 Animate.css 时切换动画
- Angular 和 Animate.css - 一起使用时不显示正确的信息
- AngularJS ngAnimate and animate.css
- Jquery/animate.css 侧边菜单在多次切换时消失
- Animate CSS Flip上的双面图像
- 具有 animate.css 和 jquery 的顺序动画
- onclick with javascript and animate.css
- onload add class animate.css
- wowjs/animate.css和隐藏元素
- animate.css:悬停脚本动画
- 严重被WOW.js难住,并与animate.css融合
- transform rotate()不适用于Animate.css
- 使用Animate.css链接弹跳入口/出口
- 如何添加在animate.css中编码的css动画循环之间的间隔
- 路径点,animate.css和滚动的不透明度问题
- 使用Angular 1.2和Animate.css加载动画
- ng-animate not working with animate.css