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:
- Include
angular-animate[-min].js
. - Make your module depend on
ngAnimate
. - Define your transitions in CSS using classes like
.ng-enter
and.ng-enter-active
. - 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.
Check this link http://www.nganimate.org/
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'}"
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
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.