Route transition animations in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular animation module needed for route animations.

Angular

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [[1]]
})
export class AppModule {}

Drag options to blanks, or click blank then click option'

ABrowserAnimationsModule

BRouterModule

CHttpClientModule

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing RouterModule instead of BrowserAnimationsModule

Forgetting to import any animation module

You need to import BrowserAnimationsModule to enable animations in Angular, including route transition animations.

2fill in blank

medium

Complete the code to define a simple fade animation trigger for route transitions.

Angular

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

export const fadeAnimation = trigger('fadeAnimation', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('[1]', style({ opacity: 1 }))
  ])
]);

Drag options to blanks, or click blank then click option'

A'2s linear'

B'500ms ease-in'

C'100ms ease-out'

D'1s ease-in-out'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number without quotes

Using an invalid timing string

The animation duration and easing string should be a valid CSS timing value like '500ms ease-in' to create a smooth fade-in effect.

3fill in blank

hard

Fix the error in the animation trigger by completing the transition for route leave with a fade out.

Angular

export const fadeAnimation = trigger('fadeAnimation', [
  transition(':leave', [
    animate('[1]', style({ opacity: 0 }))
  ])
]);

Drag options to blanks, or click blank then click option'

A'fadeOut'

B'ease-out 300ms'

C300

D'300ms ease-out'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a number instead of a string

Using an invalid string like 'fadeOut'

The animate function requires a string with duration and easing like '300ms ease-out' to work correctly.

4fill in blank

hard

Fill both blanks to apply the fadeAnimation trigger to the router outlet with animation state.

Angular

<router-outlet @fadeAnimation="[1]" (activate)="[2]()"></router-outlet>

Drag options to blanks, or click blank then click option'

AprepareRoute

BonActivate

CrouteState

DhandleActivate

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up method names

Using invalid binding names

The animation state is usually bound to a method like routeState that returns the current route's animation state. The onActivate method can be used to handle activation events.

5fill in blank

hard

Fill all three blanks to create a route animation trigger with slide left and slide right transitions.

Angular

export const slideAnimation = trigger('routeAnimations', [
  transition('[1] => [2]', [
    style({ transform: 'translateX(100%)' }),
    animate('300ms ease-in-out', style({ transform: 'translateX(0%)' }))
  ]),
  transition('[3] => [1]', [
    style({ transform: 'translateX(-100%)' }),
    animate('300ms ease-in-out', style({ transform: 'translateX(0%)' }))
  ])
]);

Drag options to blanks, or click blank then click option'

AHomePage

BAboutPage

CContactPage

DLoginPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same route for all blanks

Mixing up the order of route states

This animation defines transitions from HomePage to AboutPage sliding left, and back from AboutPage to HomePage sliding right.