how to use animation with ng-repeat in angularjs

Question

I have a list which I iterate over by using ng-repeat: and the user can interact with thte list items by using up-arrow and down-arrow icons and on click of them i simply ch

Answer 1

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.

Answer 2

If you don’t wish to use ‘ngAnimate’ module because of reduce the plugins count, you can archive the simple transition effect by using ng-init and custom directives.

<li ng-repeat="item in items" class="item" item-init>{{item.name}}</li>

.item{
    opacity:0;

   -webkit-transition: all linear 300ms;
   transition: all linear 300ms;
}
.item.visible{
    opacity:1;
}


myApp.directive('itemInit', function ($compile) {
    return function (scope, element, attrs) {
        scope.initItem(element);
    };
});

In you controller

$scope.initItem = function(el){
    $timeout(function(){
        angular.element(el).addClass('visible');
    },0);
}

Answer 3

Check this link http://www.nganimate.org/

1. You need to declare the ng-animate attribute to an element that have another directive that changes the DOM

   div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"
   

2. You need to add css transitions or animation.

   .animate-enter {
      -webkit-transition: 1s linear all; /* Chrome */
      transition: 1s linear all;
      opacity: 0;
   }
   .animate-enter.animate-enter-active {
      opacity: 1;
   }
   

You can check plnkr example here: http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM

Answer 4

Complementing the last answer, there is the ng-move class for animations when order is changed:

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

Last documentation here.