Disable list item animate


How to disable list item animate?

animation	className		An animation class to apply on the list for animating children.


What do you mean by animate? As far as I know, there isn’t any animation that is applied to list items.


Not sure what you mean either. I searched the entire code base and don’t find those strings anywhere.


Theres an animation feature on the list directive but i’m not sure its ever been expanded upon.



List doesn’t animate by default.

animation attribute just adds class name to the list. Example:

<ion-list animation="my-animate">
  <ion-item ng-repeat="item in items">
    <h2>{{ item.title }}</h2>
.my-animate .ng-enter,
.my-animate .ng-leave {
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  position: relative;
  display: block;
.my-animate .ng-enter.ng-enter-active,
.my-animate .ng-leave {
  opacity: 1;
  top: 0;
  height: 30px;
.my-animate .ng-leave.ng-leave-active,
.my-animate .ng-enter {
  opacity: 0;
  top: -50px;
  height: 0px;

Animation is taken from old ngAnimate site. Please note, that as of Angular 1.2, you need to use class names like .ng-enter, not old ones like .my-animate-enter.


How can you create a staggered animation to list items on page load?


Seek and you shall find.