Angular Route Transitions

The example below assumes you already have at least two navigable pages.

Step 1. Install Dependencies

bash

ng add @angular/animations

Step 2. Provide provideAnimationsAsync

app.config.ts

Since Angular 18, provideAnimationsAsync, is a great way to:

• load animations more efficiently
• reduce initial bundle size and improve performance.

Update your app.config like this:

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

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimationsAsync()]
};

Step 3. Add Transition to Router Outlet

app.component.ts:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, RouterOutlet } from '@angular/router';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  standalone: true,
  imports: [CommonModule, RouterModule],
  selector: 'app-root',
  animations: [
    trigger('routeFadeAnimation', [
      transition('* <=> *', [
        style({ opacity: 0 }),
        animate('300ms ease-in-out', style({ opacity: 1 }))
      ])
    ])
  ],
  template: `<main [@routeFadeAnimation]="outlet.isActivated ? outlet.activatedRoute : ''">
               <router-outlet #outlet="outlet"></router-outlet>
             </main>`
})
export class AppComponent {}