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?

I tried looping the results and push them into $scope.objects, but that was too fast and I didn't see the animation occur .... if there was an option to delay a bit inside the "for loop" then I could really tell if it's happening at all :D — Ricky Levi, Mar 30 '15 at 12:29

score 2 · Answer 1 · answered Mar 11 '14 at 04:54

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

Here's a different working example of what Charlie Martin posted above. https://jsfiddle.net/hyga3rf1/ — Jon Watson, Jun 27 '16 at 23:36

score 0 · Answer 2 · edited May 23 '17 at 10:28

This is an old question, but I came across it and thought I would put in my $0.02

Instead of replacing the object with the new list just to get a few new elements, instead push just the new elements into the back of the array, and then have the array displayed in your ng-repeat in reverse. This way when the new items come in they go in one at a time, allowing them to be animated.

$http.get('/some/url')
.success(function(objects){
  for(o in objects){
    if(!$scope.objects[o]){
      $scope.objects.push(objects[o]);
    }
  }
});

Animate new elements in AngularJS

2 Answers2