Angular Animations: Learn the basics

[@ytamb01]

Thanks. That was a clear explanation of the basics that I needed to hear. I've been turned off angular animations in the past because the animations array has always been incomprehensible.

[@MohamedAyman-lf1sz]

That is very useful, thank you. Keep it up please. 👏🏼👏🏼

[@briantreese]

Thanks, will do!

[@drzewko3871]

What a hidden gem! Amazing content man, keep pushing. Also, I have a question: when setting this whole animation, is the sidebar disappearing from the DOM when it is closed? Or does it just sit out of the user view? I am asking because idk if I should switch to the angular animations from using tailwind classes to achieve similar thing. What do you think?

[@briantreese]

Thanks! For this particular example, it just sits out of view. But, it is possible with Angular animations to animate items that enter and leave the DOM. You can see this here: kzbin.info/www/bejne/qnW7nJZ_ibB3ers. You certainly don't need to switch away from tailwind classes, if it's working for you as is, I'd probably just leave it. It's just good to understand how animations work in Angular for when you encounter a situation where plain CSS won't work.

[@freddiebanfield4634]

Very good video!

[@guicercal]

what are the advantages of using this instead of css classes to manage the animations?

[@briantreese]

If you can use CSS animations there's absolutely nothing wrong with using them but sometimes you can't like when items are being added or removed from the DOM for example. Sometimes you'll want to stagger several items in as they enter. Sometimes you may need to do something else programmatically when an animation starts or ends. There are many different scenarios. The animation module in Angular is not a replacement for standard CSS animations it's just another option that you can leverage, when needed, depending on what your particular need is for any given situation. You won't always need to use it but the more you know about it, the more tools you'll have to solve future challenges. I hope that helps!

[@veronikas.1347]

Thanks a lot, it was really useful!

[@briantreese]

Glad it was helpful!