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">

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

Have a look at the animate directive in angular-ui

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:

By : craigb

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