Router Transition Animations With Angular 4

In this snippet, we create a router transition using new animation features added in angular 4.2. It works by wrapping the router with a parent div, then we pass custom animation data through the router outlet. This snippet was inspired by the examples presented here and here.

Animating the Router Outlet in App Component

Angular 4.2 introducted a new feature that adds :enter and :leave pseudo elements to anything using the animation directive, such as [@routerAnimation] in this example.

app.component.ts

The animation process works in 3 logical steps.

1. Define a style that hides the element by default
2. Define a style to hide the page when a route is deactivated
3. Define a style to show the page when a route is activated.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('routerAnimation', [
      transition('* <=> *', [
        // Initial state of new route
        query(':enter',
          style({
            position: 'fixed',
            width:'100%',
            transform: 'translateX(-100%)'
          }),
          {optional:true}),

        // move page off screen right on leave
        query(':leave',
          animate('500ms ease',
            style({
              position: 'fixed',
              width:'100%',
              transform: 'translateX(100%)'
            })
          ),
        {optional:true}),

        // move page in screen from left to right
        query(':enter',
          animate('500ms ease',
            style({
              opacity: 1,
              transform: 'translateX(0%)'
            })
          ),
        {optional:true}),
      ])
    ])
  ]
})
export class AppComponent {

  // change the animation state
  getRouteAnimation(outlet) {
    return outlet.activatedRouteData.animation
  }

}

app.component.html

First, wrap the router with an element and apply the animation directive. Second, make a template reference variable #route to the router outlet and pass it as the argument to the getRouteAnimation function.

<div [@routerAnimation]="getRouteAnimation(route)">
  <router-outlet #route="outlet"></router-outlet>
</div>

App Router

In the router, custom data is passed to individual routes to define the animation state. You can use this data to define any number of custom transitions in the animation code. Currently, we are apply the same transition to all state changes.

app.routing.module

In this example, we have a couple routed components that have been given their own custom animation data. Whenever these routes are activated they will trigger a state change in the animation and the transition effects will be applied.

const routes: Routes = [
  // ...omitted
  { path: 'tiger',   component: TigerPageComponent,   data: { animation: 'tiger' } },
  { path: 'dolphin', component: DolphinPageComponent, data: { animation: 'dolphin' } },
]

That’s it for routable animations with Angular. Let me know what you think in the comments.