Angular2 - Verlassen Animation nicht anwenden

Question

Ich habe eine Angular2 App, und ich versuche, eine Animation zu meinem Routing hinzuzufügen, so dass es gleitet, wenn ich Seiten wechseln. Die Eingabeanimation funktioniert einwandfrei, die aktivierende Animation wird jedoch nicht aktiviert. Die vorherige Seite verschwindet einfach, nachdem die neue Seite geladen wurde. Kennt jemand die Ursache dieses Problems? plunker

Nach der anuglar2 docs, denke ich, meine Übergänge sind korrekt.

// transition(':enter', [ ... ]); // void => * 
// transition(':leave', [ ... ]); // * => void 

Animationsdatei

export function routerTransition() { 
    return trigger('routerTransition', [ 
     transition('void => *', [ 
      style({ transform: 'translateX(100%)' }), 
      animate(1000) 
     ]), 
     transition('* => void', [ 
      style({ transform: 'translateX(-100%)' }), 
      animate(1000) 
     ]) 
    ]) 
} 

child_1.component.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]': '' } 
}) 

child_2.component.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]': '' } 
}) 

Answer 1

Ich denke, Sie sollten den Code für die Animation wie folgt geändert werden:

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%)'})) 
     ]) 
    ]) 
} 

Hier ist ein Beispiel Plunk

Hinweis:In Angular 4, Animationen haben aus gezogen @ Winkel/Kern und in das Paket, das Sie noch einfache Dokumentation und nehmen besser nutzen Auto-Vervollständigung ermöglicht.

Answer 2

Es sieht aus wie gibt es zwei Hauptprobleme:

1. Die Leave-Transition ist genauso definiert wie die Enter-Transition, muss aber anders definiert werden, so dass der angegebene Style als "End" -Zustand anstelle des "Start" -Zustands des Übergangs verwendet wird.

   // Instead of 
   transition('* => void', [ 
       style({ transform: 'translateX(-100%)' }), 
       animate(1000) 
   ]) 
   
   // Use 
   transition('* => void', 
       animate(1000, style({transform: 'translateX(-100%)', opacity: 0})) 
   ) 
   

2. Sie benötigen, da sonst display:block (oder inline-block) auf dem Host haben, es ist inline und übersetzen nur auf Blöcken arbeitet.

   // Instead of 
   host: { '[@routerTransition]': '' } 
   
   // Use 
   host: { 
       '[@routerTransition]': 'true', 
       '[style.display]': "'block'", 
   }, 
   

Obwohl die Animation ist wahrscheinlich nicht das, was Sie wollen, zumindest das einen mehr oder weniger Arbeitsausgangspunkt: https://plnkr.co/edit/eFrjtTOtXkWp8IUeAYdo?p=preview

Hier ist ein weiteres Beispiel aus den Winkeln Leuten: http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview