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