角2ルーティングされたコンポーネントのボイド状態をアニメーション化する

Question

コンポーネントデコレータのhostプロパティを使用して、アニメーショントリガを宣言します。このトリガには、* => voidの遷移状態が含まれます。

私は800msの持続時間を適用しました（テストのために、私はそれを5秒に変更しました）ので、それを別のコンポーネントに持っていくrouterLinkをクリックすると、5第2の遅延が生じる。

問題は、アニメーションが発生していないということです。これは、左にスライドすると不透明度に退色しなければならない：0

ここでコンポーネントデコレータ内のコードです：

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

あなたはあなたの状態true代わりの*を呼び出す必要があります。