How to listen to animation end event

[SuneethaYamani]

How to detect animation end event and enable another animation in sequence

[filipows]

Hi @SuneethaYamani ,

We have 2 callback methods for each animation in Angular: start and done which are being triggered at the beginning and at the end of animation respectively. It will look like that:

<div 
    [@bounce]="animationState" 
    (@bounce.start)="animStart()" 
    (@bounce.done)="animEnd()">
</div>

and in your component:

  animate() {
    this.animationState = !this.animationState;
  }

  animStart() {
    console.log('Animation Started');
  }

  animEnd() {
    console.log('Animation Ended');
  }

So you could use done callback to trigger another animation in your case.

Here's an example on Stackblitz I've created for you.