AngularJS: How to animate ng-repeat on load using

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 and the animation should trigger when the page loads.

I am looking at this example given in the docs wherein the animation beautifully runs when you filter the items but not when the page loads.

I am using version 1.2.0

A working fiddle or plunk would be appreciated. Thanks in advance.

Answer 1

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.

Answer 2

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 3

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"