我如何延迟* 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数组添加项目,或者可能有一些更简单的方法?
答案 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 })
])
])