I wonder how can I add some effects when updating a collection

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

items is a collection, 30 for example.

This list only shows items that verify the filterFunction. The scope is regulary updated.

It works, but it's a bit violent!

Adding transitions with jquery could be great (fade in and fade out).

I wonder how can I add some effects when updating a collection

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

items is a collection, 30 for example.

This list only shows items that verify the filterFunction. The scope is regulary updated.

It works, but it's a bit violent!

Adding transitions with jquery could be great (fade in and fade out).

• javascript
• jquery
• angularjs

4 Answers 4

I recommend you use the new ngAnimate directive provided in the AngularJS Core. It supports removal and is somewhat nicer to work with.

Read the documentation here. Read more about it on this awesome yearofmoo tutorial

Have a look at the animate directive in angular-ui

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.

here's a decent article on the ngAnimate features and usage: http://www.yearofmoo.com/2013/04/animation-in-angularjs.html

A lot of a nice transtions at this site:

AnuglarJS Animations