Table of Contents
We've touched on the basics of animation in Angular, so let's now explore another feature of the animation system: animation callbacks. You can use the <^>start<^> and <^>done<^> callbacks to setup hook methods that get called at the start or end of animations.
This post discusses the animation system in Angular 2 and up.
Let's start with markup like this, where our animation trigger is called <^>itemAnim<^>:
<ul *ngIf="items">
<li *ngFor="let item of items"
(click)="removeItem(item)"
[@itemAnim]>{{ item }}</li>
</ul>
We can add callbacks with the following syntax:
<ul *ngIf="items">
<li *ngFor="let item of items"
(click)="removeItem(item)"
[@itemAnim]
(@itemAnim.start)="animStart($event)"
(@itemAnim.done)="animEnd($event)">{{ item }}</li>
</ul>
The callbacks receive an <^>AnimationTransitionEvent<^> event that contains the following properties: <^>fromState<^>, <^>phaseName<^> ("start" or "done"), <^>toState<^> and <^>totalTime<^>.
In the component we can now define the callback methods:
// ...
animStart(event) {
console.log('Animation Started');
// do more stuff
}
animEnd(event) {
console.log('Animation Ended');
// do more stuff
}
