angular - 如何延迟每个 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 中实现（虽然我自己还没有测试过）。以下示例是从此博客文章中复制的：

模板代码：

<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 })
  ])
])