Adding nice transitions when updating a collection with AngularJS

By : Laurent
Source: Stackoverflow.com
Question!

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).

By : Laurent


Answers
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.

By : ganaraj


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



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

By : craigb


This video can help you solving your question :)
By: admin