使用Stagger

Question

我使用tutorial跟踪了简单的angular/animations角度动画。这很简单，但是动画不起作用，或者我在 component

中实现错误了吗？

以下是我的动画代码：

animations: [
    trigger('listAnimation', [
      transition('* => *', [
        query(':enter', style({ opacity: 0 }), {optional: true}),
        query(':enter', stagger('300ms', [
          animate('1s ease-in', keyframes([
            style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
            style({opacity: .5, transform: 'translateY(35px)',  offset: 0.3}),
            style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}),
          ]))]), {optional: true})
      ])
    ])
  ]

和我的 html

<div>
    <ion-card id="list" [@listAnimation]="lists.length" class="box" *ngFor="let list of lists; let i = index">
      <ion-row>
          <ion-col col-4 text-center>
            <p>{{list.time}}</p> 
          </ion-col>
          <ion-col col-2 text-center>
            <p>{{list.amount}}</p>
          </ion-col>
          <ion-col col-2 text-center>
            <p>{{list.fees}}</p> 
          </ion-col>
          <ion-col col-2 text-center>
            <p>{{list.balance}}</p> 
          </ion-col>
          <ion-col col-2>
            <button ion-button icon-only clear small (tap)="viewMore(list)">
              <ion-icon color="listColorIcon" name="app-svg-back-next" class="icon-sm"></ion-icon>
            </button>
          </ion-col>
        </ion-row>
    </ion-card>
  </div>

我的目标是制作一个动画，如上面教程的链接中所示。我希望数组中的每一项都渐渐消失，这是我无法实现的。

感谢有人可以帮助您。 预先感谢。