Tengo una aplicación Angular2 y estoy tratando de agregar una animación a mi enrutamiento, por lo que se desliza cuando cambio de página. La animación de entrada funciona bien, sin embargo, la animación de salida no se activa, la página anterior simplemente desaparece después de cargar la nueva página. ¿Alguien sabe la causa de este problema? golpeador
Según los documentos de anuglar2 , creo que mis transiciones son correctas.
// transition(':enter', [ ... ]); // void => * // transition(':leave', [ ... ]); // * => voidarchivo de animación
export function routerTransition() { return trigger('routerTransition', [ transition('void => *', [ style({ transform: 'translateX(100%)' }), animate(1000) ]), transition('* => void', [ style({ transform: 'translateX(-100%)' }), animate(1000) ]) ]) }niño_1.componente.ts
import { Component } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms' import { Router } from '@angular/router'; import { Observable } from 'rxjs/Rx'; import { routerTransition } from '../../directives/router.animation'; @Component({ selector: 'about', template: require('./about.component.html'), styles: [require('./about.component.css')], animations: [routerTransition()], host: { '[@routerTransition]': '' } })niño_2.componente.ts
import { Component } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms' import { Router } from '@angular/router'; import { Observable } from 'rxjs/Rx'; import { routerTransition } from '../../directives/router.animation'; @Component({ selector: 'home-info', template: require('./home.component.html'), styles: [require('./home.component.css')], animations: [routerTransition()], host: { '[@routerTransition]': '' } })Parece que hay dos problemas principales:
La transición de salida se define de la misma manera que la transición de entrada, pero debe definirse de manera diferente para que el estilo especificado se use como el estado de 'fin' en lugar del estado de 'inicio' de la transición.
// Instead of transition('* => void', [ style({ transform: 'translateX(-100%)' }), animate(1000) ]) // Use transition('* => void', animate(1000, style({transform: 'translateX(-100%)', opacity: 0})) ) Debe tener display:block (o inline-block ) en el host, ya que de lo contrario está en línea y la traducción solo funciona en bloques.
// Instead of host: { '[@routerTransition]': '' } // Use host: { '[@routerTransition]': 'true', '[style.display]': "'block'", },Aunque la animación probablemente no sea lo que desea, al menos es un punto de partida más o menos funcional: https://plnkr.co/edit/eFrjtTOtXkWp8IUeAYdo?p=preview
Aquí hay otro ejemplo de la gente angular: http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview
Creo que deberías cambiar el código para la animación de la siguiente manera:
export function routerTransition() { return trigger('routerTransition', [ state('void', style({position:'fixed', width:'100%'}) ), state('*', style({position:'fixed', width:'100%'}) ), transition('void => *', [ style({transform: 'translateX(-100%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) ]), transition('* => void', [ style({transform: 'translateX(0%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(100%)'})) ]) ]) }Aquí hay un ejemplo Plunk
Nota: En Angular 4, las animaciones se sacaron de @angular/core y se incluyeron en el paquete, lo que le permite encontrar más fácilmente la documentación y aprovechar mejor el autocompletado.