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 would you animate a list where items can be added or removed, such as a shopping cart?
Advertisement
Back to results for “Animations”
Angular › Angular Animations

How do route transition animations work in Angular, allowing pages to animate as a user navigates?

Advanced

Answer

You can attach an animation trigger to the element that wraps your router outlet, then use special selectors to detect when a new route enters and the old route leaves, letting you animate a smooth transition between two different pages instead of an instant, abrupt swap.
trigger('routeAnimation', [
  transition('* <=> *', [
    query(':enter, :leave', style({ position: 'absolute', width: '100%' }), { optional: true }),
    query(':enter', [style({ opacity: 0 }), animate('300ms', style({ opacity: 1 }))], { optional: true })
  ])
])
Real-world example A portfolio website fades smoothly between its projects page and about page as a visitor clicks through navigation links, using route transition animations tied to the router outlet.

Common follow-ups: Why do both entering and leaving elements need to be positioned absolutely during this kind of animation?;How would you trigger a different animation depending on which specific route is being entered?

Routing;Components & Templates
All 5 Angular Animations questions