如何延迟每个 ngFor 项目动画

Question

我如何延迟 *ngFor 的每一项以一个接一个地动画？

我的意思是这样的：

<li *ngFor="let item of items"> //end result like below:
  <a [@flyIn]="'in'">first item</a> // delay 100ms and animate
  <a [@flyIn]="'in'">first item</a> // delay 200ms and animate
  <a [@flyIn]="'in'">first item</a> // delay 300ms and animate
  <a [@flyIn]="'in'">first item</a> // delay 400ms and animate
  <a [@flyIn]="'in'">first item</a> // delay 500ms and animate
</li>

我是否需要每隔一段时间将项目添加到项目数组中，或者可能有一些更简单的方法？

Answer 1

这在 angular 4.2 中应该是可能的（尽管我自己还没有测试过）。以下示例复制自 this blog post:

模板代码：

<div [@races]="races?.length">
  <button class="btn btn-primary mb-2" (click)="toggle()">Toggle</button>
  <div *ngFor="let race of races | slice:0:4">
    <h2>{{race.name}}</h2>
    <p>{{race.startInstant}}</p>
  </div>
</div>

动画代码：

trigger('races', [
  transition('* => *', [
    query(':leave', [
      stagger(500, [
        animate(1000, style({ opacity: 0 }))
      ])
    ], { optional: true }),
    query(':enter', [
      style({ opacity: 0 }),
      animate(1000, style({ opacity: 1 }))
    ], { optional: true })
  ])
])

如何延迟每个 ngFor 项目动画

How to delay each ngFor items animation

angular

angular2-animation