角4滑らかなアニメーション

Question

私はいくつかのアニメーションを使用して、統計やグラフなどのような別のカードで角4で一種のホームページをしようとしています。 グラフカードの場合、私はdivをトグルしてアイコンを大きくして（フルスクリーンのように）アイコンボタンを作った。アニメーションコードは、現在、このように動作します：

state('small', style({position: 'relative', width: '50%'})), 
state('large', style({ 
    transform: 'translateY(-150px)', 
    position: 'absolute', 
    width: '100%' 
})), 
transition('small => large', animate('600ms ease', keyframes([ 
    style({position: 'absolute', width: '100%', offset: 0}), 
    style({transform: 'translateY(-150px)', offset: 1.0}), 
]))), 
transition('large => small', animate('600ms ease', keyframes([ 
    style({transform: 'translateY(-150px)', offset: 0}), 
    style({width: '50%', right: 0, offset: 1.0}), 
]))) 

最初のステップのため、予想通りこれは動作しません（小=> LAGE）幅が、アニメーションされていないが、その逆のアニメーションのための変換のいずれかではありません。 私は「スムーズ」な何かをしたいと思っていますが、私はそれを作るために数日間苦労してきました。ここで

は、私はあなたの助けのために

おかげで（最初のplunkrは私のxを判断してはいけない）私が何をしたか、あなたと私が試したの異なるもの（コメント）を表示するために作られたquick plunkrです！

Answer 1

キーフレームを使用せず、イージーインアウトトランジションを使用することで、目的のアニメーション効果を得ることができると思います。

animations: [ 
     trigger('panelAnimation', [ 
      state('in', style({transform: 'translateX(0)'})), 
      transition('void => *', animate('600ms ease-in', keyframes([ 
       style({opacity: 0, offset: 0}), 
       style({opacity: 1, offset: 1.0}) 
      ]))) 
     ]), 
     trigger('graphAnimation', [ 
      state('small', style({ 
       position: 'absolute', 
       right: 0, 
       width: '50%' 
       transform: 'translateY(0px)' 
      })), 
      state('large', style({ 
       transform: 'translateY(-150px)', 
       position: 'absolute', 
       right: 0, 
       width: '100%' 
      })), 
      transition('small => large', animate('600ms 0.2ms ease-in-out')), 
      transition('large => small', animate('600ms 0.2ms ease-in-out')) 


     ]) 
    ] 

あなたが探している効果を与える必要があります：あなたは、州およびgraphAnimationトリガにこれらの変更を使用してplunkrを編集した場合。あるいは、グループを使って独立したアニメーションのタイミングを見ることもできます。