All 5 Angular Animations questions
More in Angular Animations
What is the Angular animations module and how do you enable it in a project? How would you animate a button so it grows slightly when a user hovers over it? How do you define a simple fade in animation using the trigger and transition functions in Angular? How do route transition animations work in Angular, allowing pages to animate as a user navigates?
Advertisement
Angular › Angular Animations

How would you animate a list where items can be added or removed, such as a shopping cart?

Intermediate

Answer

Angular provides special animation functions like query and stagger that let you detect when elements enter or leave a list, and animate each one, such as sliding it out smoothly, instead of the item just disappearing suddenly from the page.
trigger('listAnimation', [
  transition('* => *', [
    query(':leave', [
      stagger(50, [ animate('200ms', style({ opacity: 0, transform: 'translateX(-30px)' })) ])
    ], { optional: true })
  ])
])
Real-world example An online store animates each product sliding out smoothly when a customer removes it from their shopping cart, instead of the item disappearing instantly and confusing the user.

Common follow-ups: What does the optional flag inside the query function actually do?;How does stagger create a delayed, cascading effect for multiple items?

Directives;Content Projection (ng-content)
All 5 Angular Animations questions