Animando nuestras rutas en Angular 9

Buenas tardes, en esta oportunidad les raigo un tutorial de como animar nuestras rutas en Angular, y así darle mayor vistosidad a nuestra UI, manos a la obra:

Lo primero que haremos sera crear nuestra app con el CLI de angular:

ng new animations-app

Una vez creada nuestra aplicación procedemos a abrirla con nuestro editor de texto favorito, en mi caso WebStorm, nos dirigimos al app.module.ts e importamos el brwoserAnimationsModule de la siguiente manera:

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

Luego de importado se agrega a la sección de imports

imports: [
    BrowserModule,
    BrowserAnimationsModule // <-- here
    AppRoutingModule,
  ],

Ahora abrimos el app.component.hwebstormtml y borramos todo excepto el router-outlet y agregamos el siguiente código:

<div [@routeAnimations]="prepareRoute(outlet)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

En el app.component.ts agregamos lo siguiente:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [ // aqui iran nuestras animaciones
    // fader,
    // slider,
    // transformer,
    stepper
  ]
})
import {RouterOutlet} from '@angular/router';
prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }

Ahora procedemos a crear un archivo , al cual llamaremos routerAnimations.ts con el siguiente código:

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

export const stepper =
  trigger('routeAnimations', [
    transition('* <=> *', [
      query(':enter, :leave', [
        style({
          position: 'absolute',
          left: 0,
          width: '100%',
        }),
      ]),
      group([
        query(':enter', [
          animate('2000ms ease', keyframes([
            style({ transform: 'scale(0) translateX(100%)', offset: 0 }),
            style({ transform: 'scale(0.5) translateX(25%)', offset: 0.3 }),
            style({ transform: 'scale(1) translateX(0%)', offset: 1 }),
          ])),
        ]),
        query(':leave', [
          animate('2000ms ease', keyframes([
            style({ transform: 'scale(1)', offset: 0 }),
            style({ transform: 'scale(0.5) translateX(-25%) rotate(0)', offset: 0.35 }),
            style({ opacity: 0, transform: 'translateX(-50%) rotate(-180deg) scale(6)', offset: 1 }),
          ])),
        ])
      ]),
    ])

  ]);

Una vez creado el archivo lo importamos en nuestro app.component.ts:

import { Component } from '@angular/core';
import {RouterOutlet} from '@angular/router';
import * as animations from './routerAnimations'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    // fader,
    // slider,
    // transformer,
    animations.stepper
  ]
})
export class AppComponent {
  title = 'animations-app';
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}

Luego procedemos a crear 3 componentes para hacer la demostración y los agregamos a nuestro routing de la siguiente manera:
nuestro app-routing quedara de la siguiente manera:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AboutComponent} from './routes/about/about.component';
import {RightComponent} from './routes/right/right.component';
import {LeftComponent} from './routes/left/left.component';

const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'right', component: RightComponent, data: { animation: 'isRight' } },
  { path: 'left', component: LeftComponent, data: { animation: 'isLeft' } },
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Ahora crearemos un menú en nuestro app.component.html para llamar a las rutas y poder disfrutar de las animaciones.

Puedes descargar el código fuente desde aquí

Hasta la proxima!