Angular Animations: Querying and staggering items
I work in Angular every day and I build things that need to be animated or transitioned when interacted with.
🚀 Want to master Angular Signal Forms?
I just released a full course where we build a real Signal Form step-by-step covering validation, async validation, dynamic fields, custom controls, and submission patterns.
👉 Enroll here:
https://www.udemy.com/course/angular-...
And, because of this, I’m thankful for the Animations module. There are so many useful features available that make life much easier. We’re going to look at two of these features in this video. First, we’re going to use the query function to find and animate several items at once. Then, we’ll use the stagger function to create a delay between the animations running on each of these items. Alright, let’s get to it.
------------------------------------------------------------------------------
📺 More Angular Animation Tutorial Videos: • Angular Animations
------------------------------------------------------------------------------
🔗 Demo Link:
https://stackblitz.com/edit/stackblit...
------------------------------------------------------------------------------
📖 Chapters:
0:00 – Introduction
1:11 – The demo application
1:51 – Using the query() function to animate multiple items as they enter and leave
3:12 – Setting up the animation
4:01 – Using the query() function for the :enter animation
6:08 – Using the query() function for the :leave Animation
7:16 – Making the animation query() optional
7:58 – Adding a stagger effect when many items are aminating at once
8:24 – Staggering items as they :enter
8:55 – Staggering items as they :leave
9:24 – Reversing the stagger order
9:40 – Conclusion
------------------------------------------------------------------------------
#angular #angulartutorial #animation