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

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
}