En lugar de adjuntar una animación a cada componente que se enruta, como en esta respuesta de StackOverflow , o como en la primera parte de la documentación oficial . Un ejemplo:
En
hero-detail.component.ts:import { Component, OnInit } from '@angular/core'; import { fadeInOutAnimation } from "app/app-routing.animation"; @Component({ selector: 'app-home', templateUrl: './home.component.html', animations: [ fadeInOutAnimation(300) ] }) export class HomeComponent{ }En
app-routing.animation.ts:import { trigger, state, style, animate, transition } from '@angular/animations'; export const fadeInOutAnimation = function (fadeInTimeMS) { return trigger('fadeInOut', [ transition(':enter', [ // :enter is alias to 'void => *' style({ opacity: 0 }), animate(fadeInTimeMS, style({ opacity: 1 })) ]), transition(':leave', [ // :leave is alias to '* => void' animate(fadeInTimeMS, style({ opacity: 0 })) ]) ]) }
Quiero animar rutas basadas en rutas de ruta:
La aplicación de animaciones de ruta a componentes individuales funciona para una demostración simple, pero en una aplicación de la vida real, es mejor animar rutas en función de las rutas de ruta.
como se indica al final de 'Agregar animaciones al componente enrutado' en la documentación angular. Sin embargo, no se expande sobre cómo hacer esto.
Aquí hay una animación en la que puede ver la vista deslizándose de izquierda a derecha cuando avanza y de derecha a izquierda cuando retrocede sin agregar la animación a los componentes por separado .
import {animate, AnimationMetadata, group, query, style, transition, trigger} from '@angular/animations'; const leftToRight: AnimationMetadata[] = [ /* order */ /* 1 */ query(':enter, :leave', style({position: 'fixed', width: '100%'}) , {optional: true}), /* 2 */ group([ // block executes in parallel query(':enter', [ style({transform: 'translateX(100%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) ], {optional: true}), query(':leave', [ style({transform: 'translateX(0%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'})) ], {optional: true}), ]) ]; const rightToLeft: AnimationMetadata[] = [ /* order */ /* 1 */ query(':enter, :leave', style({position: 'fixed', width: '100%'}) , {optional: true}), /* 2 */ group([ // block executes in parallel query(':enter', [ style({transform: 'translateX(-100%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) ], {optional: true}), query(':leave', [ style({transform: 'translateX(0%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(100%)'})) ], {optional: true}), ]) ]; export const routerTransition = trigger('routerTransition', [ transition('first_page => second_page', leftToRight), transition('second_page => first_page ', rightToLeft), transition('second_page => third_page', leftToRight), transition('third_page => second_page', rightToLeft), ]);E impórtelo en su AppComponent y agregue una función para devolver el estado de la ruta. No olvides los estilos que he aplicado.
import {routerTransition} from "./router.animations"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styles: [` /deep/ router-outlet ~ * { position: absolute; width: 100%; } `], animations: [routerTransition] }) export class AppComponent implements { getState(outlet) { return outlet.activatedRouteData.state; } onDeactivate() { // document.body.scrollTop = 0; // Alternatively, you can scroll to top by using this other call: window.scrollTo(0, 0); } }Aplicarlo a la etiqueta principal como una directiva
<main [@routerTransition]="getState(o)"> <router-outlet #o="outlet" (deactivate)="onDeactivate()"></router-outlet> </main>Aquí hay un ejemplo de cambio de transiciones basadas en rutas:
import { trigger, query, group, animate, transition, style } from "@angular/animations"; const fade: any = [ transition(':enter', [ // :enter is alias to 'void => *' style({ opacity: 0 }), animate(fadeInTimeMS, style({ opacity: 1 })) ]), transition(':leave', [ // :leave is alias to '* => void' animate(fadeInTimeMS, style({ opacity: 0 })) ]) ]; const transition2: any = [ //other transition ]; export const routerTransition = trigger('routerTransition', [ transition('path1 => *', fade), transition('path2 => path3', fade), transition('path3 => path1', transition2), transition('* => path2', transition2), ]);Luego en componentes usa la animación:
@Component({ selector: 'app-home', templateUrl: './home.component.html', animations: [ routerTransition ] })