javascript 使用 AngularJS 更新集合时添加漂亮的过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12728181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding nice transitions when updating a collection with AngularJS
提问by Laurent
I wonder how can I add some effects when updating a collection
我想知道如何在更新集合时添加一些效果
<li ng-repeat="item in items | filter:filterFunction">
{{item.name}}
</li>
<li ng-repeat="item in items | filter:filterFunction">
{{item.name}}
</li>
itemsis a collection, 30 for example.
items是一个集合，例如 30。
This list only shows items that verify the filterFunction. The scope is regulary updated.
此列表仅显示验证filterFunction 的项目。范围定期更新。
It works, but it's a bit violent!
它有效，但它有点暴力！
Adding transitionswith jquery could be great (fade in and fade out).
使用 jquery添加过渡可能很棒（淡入淡出）。
回答by Kenneth Lynne
I recommend you use the new ngAnimate directive provided in the AngularJS Core. It supports removal and is somewhat nicer to work with.
我建议您使用 AngularJS Core 中提供的新 ngAnimate 指令。它支持删除，并且更好用。
Read the documentation here. Read more about it on this awesome yearofmoo tutorial
阅读此处的文档。在这个很棒的 yearofmoo 教程中阅读更多相关信息
回答by ganaraj
Have a look at the animate directive in angular-ui
看看 angular-ui 中的 animate 指令
http://angular-ui.github.com/#directives-animate
http://angular-ui.github.com/#directives-animate
It should help you achieve what you are trying to do. Just to let you know, the angular team has promised animations support for ng-repeat and ng-switch in the next or so major release. So keep your fingers crossed till then.
它应该可以帮助您实现您正在尝试做的事情。只是让您知道，angular 团队已承诺在下一个左右的主要版本中为 ng-repeat 和 ng-switch 提供动画支持。所以请保持手指交叉直到那时。
回答by craigb
here's a decent article on the ngAnimate features and usage: http://www.yearofmoo.com/2013/04/animation-in-angularjs.html
这是一篇关于 ngAnimate 功能和用法的不错的文章：http://www.yearofmoo.com/2013/04/animation-in-angularjs.html
