Add event bindings for animation start and completion when using the new animate.enter and animate.leave syntax. #63134
Description
Which @angular/* package(s) are relevant/related to the feature request?
animations
Description
Currently, with the Angular animations library, we can declaratively handle animation completion like this:
<div @fadeOutOnLeave (@fadeOutOnLeave.done)="executeSomeBusinessLogic()"></div>
With the new class-based animate approach, there is no straightforward way to listen for animation completion events:
<div animate.leave="fade-out"></div>
Use Case:
I need to execute business logic after an element is removed from the DOM, i.e., when its leave animation has completed.
Proposed solution
Since Angular already determines the longest animation automatically, and attaches event listeners internally to remove the element from the DOM when all animations are finished, it would be valuable to expose hooks for animation start and completion so developers can tie into that lifecycle without duplicating internal logic.
<div
animate.leave="fade-out"
(animate.leave.start)="onLeaveStart()"
(animate.leave.done)="onLeaveDone()">
</div>
or:
<div [animate.leave]="{ classes: ['fade-out'], onStart: onLeaveStart, onDone: onLeaveDone }"></div>
Alternatives considered
Current Workaround:
At the moment, I’m forced to implement a custom directive that:
- Accepts a callback for animation completion.
- Repeats Angular’s internal logic for:
Determining the longest animation duration on host element.
Attaching animationend/transitionend listeners.
Invokes the callback once all animations are complete when the element is removed from the DOM.
This results in duplicated logic that Angular already performs internally for animate.leave.