Create a cross-fade animation
There are a handful of animations that are commonly found in various applications that you probably use every day. I’ll bet you don’t even notice them or give them much thought. The app just feels easier to use and more intuitive with them. In this video I’ll show you how to use one that I need often, a crossfade animation where there’s some content fading out while some other content fades in. And I know you want to know how to do this right? We’ll let’s get to it then.
------------------------------------------------------------------------------
👕 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 Links:
Before (https://stackblitz.com/edit/stackblit...)
After (https://stackblitz.com/edit/stackblit...)
Using the Bootjack Bounce Library (https://stackblitz.com/edit/stackblit...)
------------------------------------------------------------------------------
📚 Additional Resources:
Introduction to Angular animations (https://angular.dev/guide/animations)
Bootjack Bounce Animation Library (https://www.npmjs.com/package/ngx-boo...)
------------------------------------------------------------------------------
📖 Chapters:
0:00 – Introduction
0:37 – Enabling Animations in Your Application
0:59 – Create and Add a Crossfade Animation
2:12 – Adding the Basic CSS Styles and Logic
4:48 – Creating the Basic Crossfade Animation
8:47 – Binding the Animation in the Component Template
9:43 – Using the Group Function to Animate Items in Parallel
10:27 – Installing and Using the Bootjack Bounce Animation Library
11:10 – Adding the Animation from the Library
12:26 – Customizing the Animation with Params
13:38 – Running the Crossfade Animation in Parallel
14:03 – Add a Crossfade Animation for Items Entering and Leaving the DOM
15:20 – Conclusion
------------------------------------------------------------------------------
#angular #angulartutorial #animation
Смотрите видео Create a cross-fade animation онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Brian Treese 30 Август 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 48 раз и оно понравилось 2 людям.