Angular Animations: Learn the basics

When you build stuff in Angular, you probably pretty quickly discover that you want to add animations and transitions. They are an important aspect to any application now-a-days right? They help make the overall user experience feel nicer and can help to make it more intuitive too. Many times, we can use CSS to handle these animations, but Angular has a powerful animation framework baked right in that allows us to do a lot more than what we can with plain ol' CSS.

In this video I'm going to show you the basics of getting started with Angular animations, how to create a basic state-based transition, and how to trigger it on an element when an interaction occurs. Alright, let's get to it.

------------------------------------------------------------------------------

👕 Be the coolest developer in the room with these Angular tees! (https://www.teepublic.com/user/dev-drip)

------------------------------------------------------------------------------

📺 More Angular Animation Tutorial Videos:    • Angular Animations  

------------------------------------------------------------------------------

🔗 Demo Link:
https://stackblitz.com/edit/stackblit...

------------------------------------------------------------------------------

📖 Chapters:
0:00 – Introduction
0:50 – The demo application
1:20 – Enabling the animations module with the provideAnimationsAsync() method
1:42 – Creating a state-based animation in component metadata with the animations array
1:52 – Using the Angular animations trigger() method
2:16 – Creating animation states with the state() and style() methods
3:20 – Creating a transition between animation states with the transition() and animate() methods
4:42 – Triggering the state-based animation with interaction events
6:55 – The final working animation

------------------------------------------------------------------------------

#angular #angulartutorial #animation