* 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>
ある間隔でアイテムをアイテム配列に追加する必要がありますか、それとももっと簡単な方法がありますか？
これはAngular4.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 })
])
])
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加