Gain insights into creating beautiful, performant animations in Angular. Delve into CSS transitions, Web Animations API, and Angular animations, while exploring performance and debugging techniques.

angular.tar.gz

angular

Animations play a crucial role in an application’s user experience (UX). A set of well-designed animations can make an application feel fast, polished, and professional. However, creating animations can be a daunting task that involves knowing what is available and how to choose the right approach for each task.

You will start with the easiest methods and move on to more advanced animation methods as you make your way through this course. You’ll start with general animation techniques, covering CSS transitions, animations, and the Web Animations API, followed by Angular animations and integrating external animation libraries. Lastly, you’ll finish with a deep dive into animation performance and debugging.

This course will provide you with information and advice to help you create beautiful and performant animations in Angular applications. By the end of the course, you will be able to create performant animations and choose the right tools to create them effectively.

Animations in Angular

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 still use the regular JavaScript approach in an Angular project and it’ll still function the same way except for how we access the component. Instead of accessing it by using `getViewById`, we can use Angular’s `ViewChild` decorator.

Let’s walk through how we can use this approach to listen to transition events of a button changing color. The button will toggle between two different background colors as it's clicked.


1. Create a button in our template (`app.component.html`) and give it a class, id, and a click handler.


# 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 still use the regular JavaScript approach in an Angular project and it’ll still function the same way except for how we access the component. Instead of accessing it by using `getViewById`, we can use Angular’s `ViewChild` decorator.

Let’s walk through how we can use this approach to listen to transition events of a button changing color. The button will toggle between two different background colors as it's clicked.


1. Create a button in our template (`app.component.html`) and give it a class, id, and a click handler.


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

Before We Start

CSS Transitions

CSS Animations

Web Animations API (WAAPI)

Angular Animations

Third-party Animation Libraries

Appendix

Conclusion

Events

How to use events?

Approach one: using `addEventListener`

Events

How to use events?

Approach one: using addEventListener

Approach one: using `addEventListener`