Angular CDK Overlay: Adding animations
When using the Angular CDK Overlay module, you will likely want to transition the opening and closing of the overlay content. It’s something that seems like it should be pretty easy and straightforward but it’s actually a little tricky. It can’t really be transitioned with CSS only because it’s markup that gets added into and removed from the document. It’s not a simple style or class change. We need to leverage Angular animations to make it work well.
In this video I’ll show you why and I’ll show you how to make animations work for your overlays. Alright, let’s get to it.
------------------------------------------------------------------------------
👕 Funny Angular tees, hoodies, stickers, mugs and more! (https://devdrip.creator-spring.com)
------------------------------------------------------------------------------
📺 More Angular CDK Overlay Tutorial Videos: • The Angular CDK Overlay
------------------------------------------------------------------------------
🔗 Demo Link:
https://stackblitz.com/edit/stackblit...
------------------------------------------------------------------------------
📖 Chapters:
0:00 – Introduction
1:06 – The demo application
1:27 – Using an Angular :enter and :leave animation to animate the CDK Overlay
1:50 – Creating an :enter/:leave animation in the component animations metadata
3:13 – Binding the animation to the component host with the @HostBinding decorator
3:40 – The problem with the :enter and :leave animations
4:10 – Using an Angular state-based animation to animate the CDK Overlay
4:27 – Creating a state-based animation in the component animations metadata
5:29 – Triggering the state-based animation when opening and closing the CDK Overlay
7:25 – Using the Angular animation done event and an Event Emitter to close the CDK Overlay
8:38 – Making the Animation Better With the cdkConnectedOverlayTransformOriginOn @Input
------------------------------------------------------------------------------
#angular #angulartutorial #cdk
Смотрите видео Angular CDK Overlay: Adding animations онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Brian Treese 26 Январь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,55 раз и оно понравилось 4 людям.