title: Angular JS Javascript animation fadeIn doesnt work for newly added items
body: <p>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 <code>$scope</code> list based on some user interaction. I am using the <code>$animate</code> service and <code>ngAnimate</code> is injected into the app.</p>
  
  <pre><code>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;
                });
            }
       };
  });
  </code></pre>
  
  <p>The class is applied to html as below:</p>
  
  <pre><code>&lt;div ng-repeat="item in items" class="esnfadein"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>Here is the <a href="http://plnkr.co/edit/2e7lOBHZKbi4a6coWojp?p=preview" rel="nofollow">plunker</a> 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.</p>