Animation Callbacks

Go back to Tutorial

A callback is fired when an animation is started and also when it is done.

In the keyframes example, you have a trigger called @flyInOut. You can hook those callbacks like this:

hero-list-multistep.component.ts (excerpt)

template: `

<ul>

<li *ngFor=”let hero of heroes”

(@flyInOut.start)=”animationStarted($event)”

(@flyInOut.done)=”animationDone($event)”

[@flyInOut]=”‘in'”>

{{hero.name}}

</li>

</ul>

`,

The callbacks receive an AnimationEvent that contains useful properties such as fromState, toState and totalTime.

Those callbacks will fire whether or not an animation is picked up.

Go back to Tutorial