Angular - listen on change state of animation elements

Question

Is there a way to listen on a animation key for change of elements that match the state?

For example if we have this elements:

<div id="first-div" @fadeInOut></div>
<div id="second-div" @fadeInOut @shaking></div>
<div id="third-div" @shaking></div>

I want to listen on which element is currently having fadeInOut animation and determine if it's doing :enter or :leave.

Something like:

animations.on('fadeInOut').subscribe((el) => {
  // el will tell us which element is animation and it's having which state.
});

Answer 1

We can use animation trigger call back to listen animation phases.

component.html

<div id="first-div" (@fadeInOut.start)="captureStartEvent($event)" @fadeInOut> 
</div>

component.ts

captureStartEvent(event: AnimationEvent) {
   
  }

For Reference