Route transition animations in Angular - Step-by-Step Execution

Concept Flow - Route transition animations

User triggers route change

↓

Angular Router starts transition

↓

Animation trigger activates

↓

Old component animates out

↓

New component animates in

↓

Transition completes, new route displayed

Shows how Angular triggers animations during route changes, animating old and new components smoothly.

Execution Sample

Angular

import { trigger, transition, style, animate, query } from '@angular/animations';

export const fadeAnimation = trigger('routeAnimations', [
  transition('* <=> *', [
    style({ position: 'relative' }),
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ opacity: 0 })
    ], { optional: true }),
    query(':leave', [
      animate('300ms ease-in-out', style({ opacity: 0 }))
    ], { optional: true }),
    query(':enter', [
      animate('300ms ease-in-out', style({ opacity: 1 }))
    ], { optional: true })
  ])
]);

Defines a simple fade animation triggered on any route change.

Execution Table

Step	Trigger	Animation State	Action	Result
1	User clicks link to new route	No animation	Router starts route change	Old component visible
2	Route change detected	Animation trigger fires	Old component animates out (fade out)	Old component fades out
3	Old component animation ends	Prepare new component	New component loads hidden	New component ready but invisible
4	New component animation starts	Animate in	New component animates in (fade in)	New component becomes visible
5	Animation completes	Animation ends	Transition finishes	New route fully displayed
6	Idle	No animation	Waiting for next route change	Stable UI

💡 Animation completes and new route is fully displayed, waiting for next user action.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
oldComponentVisibility	visible	fading out	hidden	hidden	hidden
newComponentVisibility	hidden	hidden	hidden	fading in	visible
animationState	none	running fade out	preparing fade in	running fade in	none

Key Moments - 3 Insights

Why does the old component animate out before the new one animates in?

Because Angular runs the 'leave' animation first to smoothly remove the old view before showing the new one, as shown in execution_table steps 2 and 3.

What triggers the animation to start on route change?

The Angular Router detects the route change and triggers the animation defined by the 'routeAnimations' trigger, as seen in step 2 of the execution_table.

Why is the new component initially hidden before animating in?

It is hidden to avoid flicker and to allow the fade-in animation to run smoothly, as shown in step 3 where the new component is ready but invisible.

Visual Quiz - 3 Questions

Look at the execution_table, what is the animationState at step 4?

A running fade out

B preparing fade in

C running fade in

D none

💡 Hint

Check the 'Animation State' column at step 4 in the execution_table.

At which step does the old component become hidden?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at 'oldComponentVisibility' in variable_tracker after each step.

If the animation duration changes from 300ms to 600ms, what changes in the execution_table?

A Steps remain same but animation actions take longer

B Animation trigger fires later

C New component loads earlier

D Old component does not animate out

💡 Hint

Duration affects timing but not the order of steps in execution_table.

Concept Snapshot

Angular route transition animations:
- Use trigger() with transition() to define animations
- Animate old component out before new component in
- Use '* <=> *' to animate all route changes
- Animations run on route change events
- Helps smooth UI changes between pages

Full Transcript

When a user changes routes in Angular, the router detects this and triggers animations defined by the developer. First, the old component animates out, usually fading or sliding away. Then the new component loads hidden and animates in, creating a smooth transition effect. This process involves animation triggers that listen for route changes and run animations in sequence. Variables track visibility and animation states to manage the UI during the transition. This approach improves user experience by avoiding abrupt content changes.

Practice

1. What is the main purpose of route transition animations in Angular?

easy

A. To speed up the loading time of routes

B. To smoothly show changes when navigating between pages

C. To prevent users from clicking links

D. To change the URL format automatically

Solution

1. Step 1: Understand what route transition animations do

   They create smooth visual effects when moving from one page to another in an Angular app.

2. Step 2: Identify the main benefit

   This helps users see the change clearly and makes the app feel more polished.

3. Final Answer:

   To smoothly show changes when navigating between pages -> Option B

4. Quick Check:

   Route animations = smooth page changes [OK]

Hint: Animations = smooth visual changes between routes [OK]

Common Mistakes:

• Thinking animations speed up loading
• Confusing animations with URL changes
• Believing animations block clicks

2. Which Angular module must you import to use route transition animations?

easy

A. BrowserAnimationsModule

B. HttpClientModule

C. FormsModule

D. RouterModule

Solution

1. Step 1: Identify the module for animations

   Angular requires BrowserAnimationsModule to enable animation features.

2. Step 2: Confirm other modules' roles

   HttpClientModule is for HTTP calls, FormsModule for forms, RouterModule for routing but not animations.

3. Final Answer:

   BrowserAnimationsModule -> Option A

4. Quick Check:

   Animations need BrowserAnimationsModule [OK]

Hint: Animations need BrowserAnimationsModule import [OK]

Common Mistakes:

• Importing RouterModule instead of BrowserAnimationsModule
• Forgetting to import any animation module
• Confusing FormsModule with animation needs

3. Given this animation trigger in Angular:

trigger('routeAnimations', [
  transition('* <=> *', [
    style({ opacity: 0 }),
    animate('300ms ease-in', style({ opacity: 1 }))
  ])
])

What happens when the route changes?

medium

A. The page reloads without animation

B. The new page slides in from the left instantly

C. The new page fades in from transparent to visible over 300ms

D. The old page fades out but new page appears instantly

Solution

1. Step 1: Analyze the animation steps

   The style starts with opacity 0 (invisible), then animates to opacity 1 (visible) over 300ms.

2. Step 2: Understand the transition

   The transition applies to any route change ('* <=> *'), so the new page fades in smoothly.

3. Final Answer:

   The new page fades in from transparent to visible over 300ms -> Option C

4. Quick Check:

   Opacity 0 to 1 = fade in [OK]

Hint: Opacity 0 to 1 means fade in effect [OK]

Common Mistakes:

• Thinking it slides instead of fades
• Assuming instant change without animation
• Confusing fade out with fade in

4. Identify the error in this Angular route animation code snippet:

@Component({
  animations: [
    trigger('routeAnimations', [
      transition('HomePage => AboutPage', [
        animate('500ms ease-in')
      ])
    ])
  ]
})
export class AppComponent {}

medium

A. transition syntax requires '*' wildcard instead of page names

B. Incorrect trigger name, should be 'routeAnimation' singular

C. animate() duration must be in seconds, not milliseconds

D. Missing style() before animate() in transition

Solution

1. Step 1: Check animation steps in transition

   Angular animations usually start with style() to set initial state before animate().

2. Step 2: Confirm if style() is required

   Without style(), Angular animates from current state, which may cause unexpected behavior.

3. Final Answer:

   Missing style() before animate() in transition -> Option D

4. Quick Check:

   Animations need style() before animate() [OK]

Hint: Always start transition with style() before animate() [OK]

Common Mistakes:

• Skipping style() causes animation issues
• Confusing trigger naming conventions
• Wrong time units in animate()

5. How can you trigger different animations for specific routes in Angular using route transition animations?

hard

A. By setting a unique animation state in each route's data and using it in the animation trigger

B. By changing the component selector dynamically during navigation

C. By disabling animations and manually adding CSS classes on route change

D. By using multiple RouterOutlet elements for each route

Solution

1. Step 1: Understand route data usage

   Angular routes can have a data property where you define an animation state string for each route.

2. Step 2: Use the animation state in the trigger

   The animation trigger reads this state to decide which animation to run on route change.

3. Step 3: Confirm other options are incorrect

   Changing selectors or disabling animations is not standard; multiple RouterOutlets are for nested routes, not animations.

4. Final Answer:

   By setting a unique animation state in each route's data and using it in the animation trigger -> Option A

5. Quick Check:

   Route data controls animation states [OK]

Hint: Use route data to assign animation states [OK]

Common Mistakes:

• Trying to change component selectors dynamically
• Manually toggling CSS instead of Angular animations
• Using multiple RouterOutlets incorrectly