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.
