Events
Explore how to listen to CSS transition events in Angular with two methods: using JavaScript's addEventListener and Angular's built-in event bindings. Understand when to use each approach, how to manage event listeners efficiently, and how to track transition start and end states to enhance your animations.
CSS transitions emit events that we can listen to using JavaScript. There are some slight differences in how we attach event listeners between a non-Angular project and an Angular one. Let’s make a list of these events:
-
transitionrun: This is emitted when the transition is created (not started). -
transitionstart: This is emitted when the transition starts. -
transitionend: This is emitted when the transition completes. -
transitioncancel: This is emitted when the transition is canceled.
Notice that the event names are all in lowercase and not camel case.
How to use events?
To listen to these events, we’ll need to attach an event listener to the element with the transition using addEventListener. It’s a global event listener, not specific to just animations or transitions. We can then pass any of the events from the list of events above to listen to a specific one.
Approach one: using addEventListener
We can ...