如何延迟每个ngFor项目动画

时间:2016-09-29 10:35:37

标签: angular angular2-animation

我如何延迟* 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>

我是否需要以某种间隔向items数组添加项目,或者可能有一些更简单的方法?

1 个答案:

答案 0 :(得分:2)

现在应该可以在角度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 })
  ])
])