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
Смотрите видео Create a slide-in/slide-out animation онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Brian Treese 16 Август 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,15 раз и оно понравилось 3 людям.