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.
});
CodePudding user response：
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) {
}