how to use animation with ng-repeat in angularjs

Following on from Marcel’s comment: in AngularJS 1.2 you don’t need to use the ng-animate directive. Instead:

1. Includeangular-animate[-min].js.
2. Make your module depend on ngAnimate.
3. Define your transitions in CSS using classes like .ng-enter and .ng-enter-active.
4. Use ng-repeat as you normally would.

HTML:

<div ng-app="foo">
    <!-- Set up controllers etc, and then: -->
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>

JavaScript:

angular.module('foo', ['ngAnimate']);
// controllers not shown

CSS:

li {
    opacity: 1;
}
li.ng-enter {
    -webkit-transition: 1s;
    transition: 1s;
    opacity: 0;
}
li.ng-enter-active {
    opacity: 1;
}

Demo in (someone else’s) Plunker.

See the docs for $animate for details on the progression through the various CSS classes.