Animation to collection-repetition item in Ionic Framework
I want to add animation like fade-slide-in-right or slide bottom to ion list item in ionic Framework app. So please give me a hint on this.
I have the following code but it is hiding my list on the device using animate.css
<ion-content>
<ion-list>
<ion-item class="item-avatar animated zoomInDown list-card" collection-repeat="list in listitem" href="#/app/listitems/{{listitem.id}}">
<img src="{{list.Icon}}">
<h2>{{list.ETitle}}</h2>
<p>{{list.LTitle}}</p>
</ion-item>
</ion-list>
</ion-content>
+3
source to share
1 answer
<ion-content>
<div collection-repeat="name in names">
<ion-item class="animated zoomInDown list-card">
<div class="main">{{name.main}}</div>
<div class="desc">{{name.desc}}</div>
<div class="time">{{name.time}}</div>
<div class="img-holder"><img ng-src="{{name.img}}"></div>
</ion-item>
</div>
</ion-content>
zoomInDown
animation from Animate.css and step animation from ngAnimate
Here is a working example. Click the button cards-list
to animate the view and list.
+3
source to share