Angular Animations Tutorial: Animating to an Unknown Height

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 video, I’ll show you how. Alright, let’s get to it.
------------------------------------------------------------------------------
📺 More Angular Animation Tutorial Videos:
1.) Learn the Basics ( • Angular Animations Tut... )
2.) Enter & Leave Animations ( • Angular Animations Tut... )
3.) The Keyframes Function ( • Angular Animations Tut... )
4.) Query and Stagger Functions ( • Angular Animations Tut... )
5.) Parallel Animations ( • Angular Animations Tut... )
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Links:
- Before (stackblitz.com/edit/stackblit...)
- After (stackblitz.com/edit/stackblit...)
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
1:29 - The demo application
2:15 - Creating the pane toggle fade in/out animation
6:34 - Animating to an unknown height
8:37 - Using animation params to add a starting height for the animation
11:03 - Conclusion
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #animation #animatingheight #animationparams

[@DraaElMizan]

Amazing. Thanks for sharing.

[@aram5642]

So grateful for this series ❤I'm pondering though where you'd draw the decision line between employing Angular animations vs View Transitions API? (let's skip the browser support for now)

[@briantreese]

That's a good question. I haven't really spent much time with the view transitions api since browser support is not there for the apps that I work on so I'm not sure that I have a great answer for you at the moment.

[@adrian333dev]

Very underrated channel ❤❤❤

[@briantreese]

I really appreciate that!

[@zizogamers]

Hey there I am getting the following error "NG05105" please help

[@briantreese]

I would need more info to help, can you create a simple Stackblitz example of your error?