Angular 2 Animieren des Leerzustands einer gerouteten Komponente

Question

Ich verwende die Host-Eigenschaft des Komponenten-Dekorators, um einen Animations-Trigger zu deklarieren, der einen Übergangszustand für * => void enthält.

Ich weiß, dass es auslöst, weil ich eine Dauer von 800ms angewendet habe (zum Testen habe ich es auf 5 Sekunden geändert, um sicher zu sein), und wenn ich auf einen routerLink klicke, der es zu einer anderen Komponente bringt, gibt es eine 5 zweite Verzögerung auftritt.

Das Problem ist, dass keine Animation stattfindet. Es sollte auf der linken Seite werden Schiebe- und Verblassen zu Opazität: 0.

Hier ist der Code innerhalb der Komponente Dekorateur ist:

host: { 
    '[@slideInOutright]': 'true', 
}, 
animations: [ 

    trigger('slideInOutright', [ 

    state('*', style({transform: 'translateX(0)'})), 

    transition('void => *', [ 
     style({transform: 'translateX(150px)', opacity:'1'}), 
     animate('300ms 500ms ease-out') 
    ]), 
    transition('* => void', [ 
     animate('800ms', style({transform: 'translateX(-60px)',opacity: '0'})) 
    ]) 
    ]) 

] 

Answer 1

Sie sollten true statt * Ihr Zustand nennen.