使用AngularJS更新集合时添加漂亮的过渡

时间:2012-10-04 13:18:00

标签: javascript jquery angularjs

我想知道如何在更新集合时添加一些效果

<li ng-repeat="item in items | filter:filterFunction">
{{item.name}}
</li>

项目是一个集合,例如30。

此列表仅显示验证 filterFunction 的项目。 范围定期更新。

它有效,但有点暴力!

使用jquery添加过渡可能会很棒(淡入和淡出)。

4 个答案:

答案 0 :(得分:12)

我建议您使用AngularJS Core中提供的新ngAnimate指令。 它支持删除,并且使用起来更好。

阅读文档here。在this awesome yearofmoo tutorial

上详细了解相关信息

答案 1 :(得分:6)

查看angular-ui

中的animate指令

http://angular-ui.github.com/#directives-animate

它应该可以帮助您实现您想要做的事情。只是为了让你知道,角度团队承诺动画支持ng-repeat和ng-switch在下一个或那么重要的版本中。所以,在此之前,请保持手指交叉。

答案 2 :(得分:2)

这是关于ngAnimate功能和用法的一篇不错的文章:http://www.yearofmoo.com/2013/04/animation-in-angularjs.html

答案 3 :(得分:0)

在这个网站上进行了很多很好的转换:

AnuglarJS Animations