Events

Learn the two approaches we can use to listen to CSS transition events.

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.

Get hands-on with 1200+ tech skills courses.