Ionic Framework 中收集重复项的动画

Question

我想在 ionic Framework Application 中添加动画，例如 fade-slide-in-right 或从底部滑动到我的 ion-list 项目。所以请给我提示来实现这个。

我使用了以下代码，但它使用 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 library and stagger animation from ngAnimate
Here 是一个工作示例。单击 cards-list 按钮启动视图和列表动画。

Ionic Framework 中收集重复项的动画

Animation to collection-repeat item in Ionic Framework

css

angularjs

ionic-framework

ionic