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

Question

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

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

items是一个集合,例如30.

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

它有效,但它有点暴力!

使用jquery 添加转换可能很棒(淡入和淡出).

Answer 1

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

阅读此处的文档.在这个非常棒的yearofmoo教程中阅读更多相关信息

Answer 2

看看angular-ui中的animate指令

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

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