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!
1 Comment
hola, esta bueno tu sitio, hablame al mail y compartimos links!, saludos