Have you ever tried to animate an element to an unknown height with CSS alone? If so, you’ve probably found that it’s not as easy as it seems. To animate a CSS height, you need to animate to a specific value, one hundred percent and auto both won’t work. You can transition max-height but this means that you probably need to use a random arbitrary value that may not work in all cases. It's just weird and may not even work depending on what you're trying to do. Well, this is something that is available with Angular animations. In this post, I'll show you how. Alright, let's get to it.
Before We Get Started
Now, before we get too far along, it’s important to note that I’ve already created several posts focused on the animation framework in Angular. They cover the basics of setting up and using Angular animations, creating state-based and enter/ leave animations, using the keyframes(), query(), and stagger() functions to create more complex animation sequences, using the start/ done animation events, and creating animations that run in parallel versus in…
