AngularJS: How to animate ng-repeat on load using ng-animate

Question

Folks!

How can I get the divs created using ng-repeat to slide down..I mean grow in size ON LOAD.

I want to achieve this using ng-animate

Answer 1

I am also trying to achieve this. AFAIK the only way is to add the items to the list after page digest.

Here is another example courtesy of Steve Guilford if it helps.

Answer 2

Can you look below url example of nganimate in ng-repeat:

http://www.nganimate.org/angularjs/ng-repeat/move

If you are using latest version of Angularjs you need to inject 'ngAnimate' in your app and also need to added dependent js file that is "angular-animate.min.js"

Answer 3

In order to show ng-repeat animation on page load, the target array has to be initially empty. Then assigned with values.

Try this http://plnkr.co/edit/mRZFFX?p=preview

This demo used $timeout to set friends value in a later time so the enter animation can be triggered.