ng2 animation：状態間のCSSプロパティを変更する方法

Question

私は、3種類のアニメーション状態：hidden,visibleおよびswitchのコンポーネントを持っています。コンポーネントはhiddenで始まり、データはAPIから取得されます。 API呼び出しが完了すると、状態はvisibleに設定され、コンポーネントが表示されます。ユーザーがコンポーネントをクリックすると、コンポーネントは消え、新しいコンテンツがAPIからロードされます。その後、コンポーネントが再び表示されます。

これはすべて動作します。しかし、私は、コンポーネントが常に左から飛んで、右に飛ぶという効果が欲しいです。私はtranslateX(-200%)とtranslateX(200%) - とtranslateX(0)の可視状態でこれを行います。より良い効果を得るためにopacityを0から1に変更します。

問題：200%から-200%までの状態switchとvisibleの間に行くコンポーネントが必要です。さもなければ、それは（最初の時間の後に）左からではなく右から飛びます。そして、これを見る必要はありません（不透明度は0のままです）。

私はkeyframesを試しましたが、きれいなアニメーションを取得できませんでした。トランジションなしでアニメーション（スタイルセット）の開始点を変更する方法はありますか？

これは、これまでのところ、私のアニメーションコードです：あなたは遷移関数でスタイル機能を置く場合は、直接スタイルを適用することができます思って誰のために

animations: [ 
    trigger('state', [ 
    state('hidden', style({opacity: 0, transform: 'translateX(-200%)'})), 
    state('visible', style({opacity: 1, transform: 'translateX(0)'})), 
    state('switch', style({opacity: 0, transform: 'translateX(200%)'})), 
    transition('hidden => visible', animate('200ms 400ms ease-in-out')), 
    transition('visible => switch', animate('200ms ease-in-out')), 
    transition('switch => visible', [ 
     animate(400, keyframes([ 
     style({opacity: 0, transform: 'translateX(-200%)', offset: 0}), 
     style({opacity: 1, transform: 'translateX(0)',  offset: 0.4}) 
     ])) 
    ]) 
    ]) 
] 
}) 

Answer 1

。同様に：

animations: [ 
    trigger('flyInAnimation', [ 
     state('hidden', style({transform: 'translateX(-100%)'})), 
     state('visible', style({transform: 'translateX(0)'})), 
     state('switch', style({transform: 'translateX(100%)'})), 
     transition('hidden => visible', animate('200ms 400ms ease-in-out')), 
     transition('visible => switch', animate('200ms ease-in-out')), 
     transition('switch => visible', [ 
     style({opacity: 0, transform: 'translateX(-100%)'}), 
     animate('200ms 600ms ease-in-out') 
     ]) 
    ]) 
    ] 

最後の移行時。

他の州のopacityプロパティを削除して直近の移行でそれを直接適用した場合に、中間の状態とすべてがきれいでうまく動作していないように見えた問題が消えました右から左への移動は見えません）。明らかにこれをレンダリングする問題があります。今はすべてが動作します。