How to apply animation to list on ng-repeat?


#1

I want to apply animation on every list item using ng-repeat.
Please let me know how I can do this?


#2

Place the animation class in your ion-item’s class or .item element. Sample animation classes can be found under ionic/scss/_animations.scss Try any of those to get an idea of how angular animation works. Good examples to use are fade-in and fade-in-not-out. I suggest you check out their guide to animations.

<ion-list>
  <ion-item class="fade-in" ng-repeat="n from list"></ion-item>
</ion-list>

#3

I’m having an issue with the fade-in class…

My items will load into the list initially then a split second later will ‘blink’ and load in with the fade.

hopefully this makes sense… Essentially: list loads normally > very quickly after, the list loads again but with the fade in animation applied.

Its almost as if the list is loaded twice, once normally, and once with the fade-in, but this is not the case. There is only one line in my code that loads this list.

Is this a known issue? I am getting “error loading page” at the bottom of my page so maybe its a symptom of another issue…