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
Watch video Create a cross-fade animation online without registration, duration hours minute second in high quality. This video was added by user Brian Treese 30 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 48 once and liked it 2 people.