動畫到離子框架中的收集 - 重複項目

Question

我想添加像淡入淡出幻燈片或從底部滑動到離子框架應用程序中的離子列表項目的動畫。 所以請給我提示來實現這一點。

我使用下面的代碼，但它使用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> 

Answer 1

<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動畫不同於Animate.css圖書館和stagger animation from ngAnimate
Here是一個工作示例隱藏在設備上我的名單。點擊cards-list按鈕開始查看並列出動畫。