CODEWITHSUNDEEP
javascriptangularjsng-animate
Phantaminuum
Phantaminuum

Reputation: 137

Animate new elements in AngularJS

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?

Upvotes: 3

Views: 2380

Answers (2)

sterling baldwin
sterling baldwin

Reputation: 181

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]);
    }
  }
});

Upvotes: 0

Charlie Martin
Charlie Martin

Reputation: 8406

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

Upvotes: 2

Related Questions