アニメーショントランジションの終了時に状態を変更する方法は？ - Angular 2

Question

こんにちは私は、このチュートリアルで示されているようにルータの遷移を行う私の角2のアプリを取得しようとしています。

Router Transition Tutorial

Demo Link

私はアニメーションには本当に新しいだと 位置のコンポーネントのスタイルを残す状態となる問題を午前：何のスクロールを可能にすることないを修正しました。 ：移行の最後に、状態をユーザー定義の状態に変更する方法を知りたいと思います。

function slideToRight() { 
    return trigger('routerTransition', [ 
    state('void', style({position:'fixed', width:'100%'})), 
    state('*', style({position:'fixed', width:'100%'})), 
    state('visible', style({position:'static', width:'initial'})), 
    transition(':enter => visible', [ //<-- my attempt at switching the state 
     style({transform: 'translateX(-100%)'}), 
     animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})), 
    ]), 
    transition('visible => :leave', [ //<-- my attempt at switching the state 
     style({transform: 'translateX(0%)'}), 
     animate('0.5s ease-in-out', style({transform: 'translateX(100%)'})) 
    ]) 
    ]); 
} 

Answer 1

代わりにstyleを入れてみてください。 slideToLeft機能付き

例：

function slideToLeft() { 
    return trigger('routerTransition', [ 
    transition(':enter', [ 
     style({transform: 'translateX(100%)', position:'fixed', width:'100%'}), 
     animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) 
    ]), 
    transition(':leave', [ 
     style({transform: 'translateX(0%)', position:'fixed', width:'100%'}), 
     animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'})) 
    ]) 
    ]); 
}