Bedingte Routenwechselanimationen basierend auf Ziel-/Quellroute

Question

Ich ging durch das ganze animation documentation des Angular 2-Teams, also habe ich verstanden, wie es funktioniert.

Ich konnte Animation auf meine Komponenten anwenden, wenn sich die Route ändert (:leave und :enter states).

Was Ich mag würde jetzt zu tun ist, Animationen Routenänderung nur anzuwenden, wenn page1-page2 geht und gilt nicht, wenn page1-page3 Übergang.

@Component({ 
    selector: 'app-page1', 
    templateUrl: './page1.component.html', 
    animations: [ 
    trigger('routerTransition', [ 
    state('void', style({ position: 'fixed', width: '100%' })), 
    state('*', style({ position: 'fixed', width: '100%' })), 

    transition(':leave', [ 
     style({ transform: 'translateX(0%)' }), 
     animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' })) 
    ]) 
    ]) 
    ], 
    host: { '[@routerTransition]': '' } 
}) 
export class Page1 {} 

Gibt es eine Möglichkeit ich den Router-Anbieter für die animations Eigenschaft übergeben können und gelten nur die Animation, wenn Zielroute page2 ist?

Answer 1

Ich konnte einen Weg nicht finden, Router zur Animationseigenschaft zu injizieren, also rollte ich mein eigenes aus.

CSS

#page1 { 
    position: fixed; 
    width: 100%; 
    transform: translateX(0%); 
    transition: transform 0.4s ease-in-out; 

    &.leave { 
     transform: translateX(-100%); 
    } 
} 

HTML

<div id="page1" [ngClass]="{ 'leave': isLeaving }"><a (click)="go()">Go</a></div> 

JS

go() { 

    this.isLeaving = true; 

    // awaits for animation to finish 
    setTimeout(() => { 
    this.router.navigate(['/page2']); 
    }, 400); 

}