Disable list item animate


#1

How to disable list item animate?

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


#2

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


#3

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


#4

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

http://ionicframework.com/docs/angularjs/views/list/


#5

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>
  </ion-item>
</ion-list>
.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.


#6

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


#7

Seek and you shall find.