Create a slide-in/slide-out animation
When you build things in Angular, you’ll probably end up wanting or needing to add animations and transitions to parts of your UI. One very common one is a “slide-in” or “slide-out” animation where an item transitions from a hidden to a visible state. And since this is something that you’re likely going to need at some point, I figured that I’d show you how to create one. So that’s what we’re going to do in this video.
------------------------------------------------------------------------------
👕 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:
My Angular Animations YouTube Playlist ( • Angular Animations )
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:28 – Enabling Animations in Your Application
0:53 – Create and Add a State-based Slide-in-out Animation
1:50 – Creating the Basic Slide Animation
5:08 – Binding the Animation in the Component Template
6:06 – Switching Slide Animation Direction
7:22 – Installing and Using the Bootjack Bounce Animation Library
8:07 – Adding The State-Based Animation from the Library
9:01 – Custom Configuration Using Animation Params
10:21 – Adding an Enter/Leave Animation from the Library
11:41 – Conclusion
------------------------------------------------------------------------------
#angular #angulartutorial #animation
Watch video Create a slide-in/slide-out animation online without registration, duration hours minute second in high quality. This video was added by user Brian Treese 16 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,152 once and liked it 37 people.