Angularでのアニメーションのコールバック

提供:Dev Guides
2022年5月25日 (水) 09:27時点におけるNotes (トーク | 投稿記録)による版 (Update)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内検索

Angular でのアニメーションの基本に触れたので、アニメーションシステムの別の機能であるアニメーションコールバックについて見ていきましょう。 startおよびdoneコールバックを使用して、アニメーションの開始時または終了時に呼び出されるフックメソッドを設定できます。

この投稿では、Angular2以降のアニメーションシステムについて説明します。


このようなマークアップから始めましょう。ここで、アニメーショントリガーはitemAnimと呼ばれます。

<ul *ngIf="items">
  <li *ngFor="let item of items"
      (click)="removeItem(item)"
      [@itemAnim]>{{ item }}</li>
</ul>

次の構文でコールバックを追加できます。

<ul *ngIf="items">
  <li *ngFor="let item of items"
      (click)="removeItem(item)"
      [@itemAnim]
      (@itemAnim.start)="animStart($event)"
      (@itemAnim.done)="animEnd($event)">{{ item }}</li>
</ul>

コールバックは、次のプロパティを含む AnimationTransitionEvent イベントを受け取ります: fromState phaseName ("start"または"done")、 toState およびtotalTime

コンポーネントで、コールバックメソッドを定義できるようになりました。

// ...

animStart(event) {
  console.log('Animation Started');
  // do more stuff
}

animEnd(event) {
  console.log('Animation Ended');
  // do more stuff
}