Angular JS Javascript animation fadeIn doesnt work for newly added items

Question

I have section of html which displays items in a list with a certain structure. I want to fadeIn the newly pushed items in to the $scope list based on some user interaction. I am using the $animate service and ngAnimate is injected into the app.

var app = angular.module('plunker',['ngAnimate'])
.animation('.esnfadein',function(){
    return{
          enter:function(element,done){
              jQuery(element).fadeIn(800,function(){
              done;
              });
          },        

          leave:function(element,done){
              jQuery(element).fadeIn(800,function(){
              done;
              });
          }
     };
});

The class is applied to html as below:

<div ng-repeat="item in items" class="esnfadein">...</div>

Here is the plunker of the working code. Fadein is not working while fadeOut works fine. Am i missing something here which applies specifically to Javascript animations in angular JS? Any help would be greatly appreciated.

Answer 1

.fadeIn() only works on elements with display:none, so you should .hide() them before applying the fadeIn effect.

Also, you weren't calling the done function -- it was missing the (). However, as that is the only thing you are doing in the callback, it is easier to pass it as the callback to the fade animations.

Plunker

app.animation('.esnfadein',function(){
  return{
    enter: function(element,done){
      jQuery(element).hide().fadeIn(800, done);
    },
    leave: function(element,done){
      jQuery(element).fadeOut(800, done);
    }
  };
});

---

Note: it is also possible to do this without any jQuery, using CSS3 Transitions. There's an example in the animations docs (plunker).