Events
Explore how to handle CSS animation events in Angular projects, using either native JavaScript event listeners or Angular’s template event bindings. Learn to manage animation start, end, and iteration events, and understand when to choose each approach for clean, maintainable code.
CSS animations emit events that we can listen to using JavaScript. These events are useful if our application contains code that depends on an animation’s state. There are some slight differences in how we attach event listeners between a vanilla project and an Angular project. Let’s start by listing the available events:
animationstart: This is emitted when the animation starts.animationend: This is emitted when the animation completes.animationiteration: This is emitted when an iteration of the animation ends and another one begins. This event only fires for then - 1iteration—the last iteration of animation will fire theanimationendevent instead.
Notice that the event names are all in lowercase and not camel case.
Events handling
A JavaScript approach to listen to these events is to attach an event listener to the element with the ...