Animate new elements in AngularJS

Question

I am using AngularJS and I am trying to animate on enter the new elements in my array:

<div ng-repeat="obj in objects">
  {{ obj.name }}
</div>

But there is a trouble with the way I renew my array: I am doing it with http.get and I am not pushing some new element to my object but totally renew it like here:

$http.get('/some/url').success(function(objects){
  $scope.objects = objects;
});

So is there any way to handle animation in this case or do I need to change the way I renew my array?

Answer 1

If you use ngAnimate, you should be able to animate the ng-enter class without an issue. Check out this plunker...

http://plnkr.co/edit/oCLzLHbDLtNT8G8rKFJS?p=preview

I am setting a 2 second delay and then completely replacing the array. The animations still work as expected. Using Angular version 1.2+, simply include the ngAnimate module in your main application module

var app = angular.module('app', ['ngAnimate']);

Give your ng-repeat elements a css class, for example 'animate'. And attach css animations, when the ng-enter, ng-leave classes are added by angular

.animate.ng-enter, 
.animate.ng-leave {
...
}
.animate.ng-enter.ng-enter-active, 
.animate.ng-leave{
 ...
}