アニメーション状態の変更をAngular 2に適用する方法

私はAngular 2 RC-6アプリケーションでアニメーションをスライドさせるかわいらしいページを実現する可能性を探しています。私はこの記事の例を得ました https://www.bennadel.com/blog/3139-experimenting-with-conditional-enter-leave-animations-in-angular-2-rc-6.htm しかし内部移行の変化を実現します。私はルータコンポーネント、別名アプリケーションページのためにそれを作る必要があります。アニメーション状態の変更をAngular 2に適用する方法

私のアニメーションの設定は次のとおりです。

host: { 
    '[@routeAnimation]': 'true', 
    '[style.display]': "'block'", 
    '[class]':"'animate-jump-off'" 
    }, 
    animations: [ 
    trigger('routeAnimation', [ 
     state('in', style({transform: 'translateX(0)'})), 
      transition('void => prev', [ 
      style({transform: 'translateX(-100%)'}), 
      animate(300) 
      ]), 
      transition('prev => void', [ 
      animate(1000, style({transform: 'translateX(100%)'})) 
      ]), 
     transition('void => next', [ 
     style({transform: 'translateX(100%)'}), 
     animate(300) 
     ]), 
     transition('next => void', [ 
     animate(1000, style({transform: 'translateX(-100%)'})) 
     ]) 


    ])

私は2つの遷移を有する-nextとバック。は、私は、テンプレート

<div class="card-container" [@routeAnimation] = "direction" >

に変数を入れてトランジションを定義し、コンポーネントのクラスにプライベート変数を追加します。私はのsetTimeoutを使用

emitter = EmitterService.get("direction"); 
    goNext():void { 
    this.emitter.emit({'direction':'next'}); 
    console.log('next'); 
    setTimeout(() => { 

     //this.router.navigate(['/questions/1']); 
    }, 100)

：は、私はそれがgoNext（）機能によって起動され、私は次のページへのリンクを持っているいくつかの内部コンポーネントに新しい状態に

this.emitter.subscribe(msg => { 
     this.direction = (msg.direction); 
     console.log(msg.direction); 
    });

を発するように持つEventEmitterを使用することにしましたそのルートコンポーネントがメッセージを傍受し、方向の状態を '次へ'に切り替えるのを遅らせるが、それはアニメーションには適用されない値です。同じインターセプターが次のページにあるので、このページの方向の状態も「次へ」に切り替える必要があります。

私は今何をしていますか？方向の値は変更されていますが、アニメーションが表示されません（コンポーネントのコンストラクタでdirection = 'none'を定義します）

現在と次のページの両方に方向変更を適用する方法を教えてください、または各ページのルーティング変更を検出する他の方法がありますか？

出典

2016-10-05 vit_vostotskiy

私は同様の問題を持っているhttp://stackoverflow.com/questions/40020101/ng2-animation-with-deferred-component-data-change –