Animation Callbacks in Angular

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>

๐ŸŠ Alligator.io recommends

Our recommended Angular courses

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
}
  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#
#native_cta#