Angular2身長アニメーション - 同じ状態遷移

Question

私は

animations:[ 
     trigger('slide', [ 
      state('show', style({ 
       height: '*' 
      })), 
      state('hide', style({ 
       position: 'relative', 
       height: 0, 
       overflow: 'hidden' 
      })), 
      transition('show <=> hide',animate('130ms ease-out')) 
     ]) 
    ] 

これは、説明するのは非常に困難である（と私はアニメーションがplunker上で動作するように取得するように見えることはできません）私のコンポーネントにアタッチ、次のアニメーションコードを持っていますが、ここに行く。

次のように現在の機能は次のとおり

1. ユーザがテーブルを表示するためのボタンをクリックします。
2. テーブルはdivの下からスムーズにスライドして表示されます。
3. ユーザーがもう一度ボタンをクリックします。
4. テーブルからスムーズにビューの外にスライドします。次のように

所望の機能がある：

1. ユーザがテーブルを表示するためのボタンをクリックします。
2. テーブルはdivの下からスムーズにスライドして表示されます。
3. より多くの行がテーブルに追加され
4. アニメーションは、新しいテーブルの高さを処理しだけ瞬時に表示される代わりに、徐々に新しい高さに移動する平滑アニメーションがある（多数の行であってもよいです）。
5. ユーザクリックボタン。

6. テーブルのスライドをdivの下に再びバックアップします。

   編集：こちらはplunkerデモです。テーブルから行を追加/削除すると、アニメーションが新しい高さにスムーズに移動しないことがわかります。

問題

はあなたが 真状態になっていると行が追加されるので、場合に発生します。

すでに真になっているため、アニメーションは真のに再び移行しません。

アイテムが追加されたとき、どのように「newHeight」状態への遷移をトリガーしますか？

Answer 1

私は角アニメーションのAPIを使用してクイック、ラフ、アニメーションの例を作った：

https://embed.plnkr.co/7qWuHmbFFie4p8Y9h53T/

あなたはアニメーションが権利を取得するまで、私はそのplnkrで遊んでます。テンプレートの* ngIfでアニメーションを切り替えたり、plnkrで表示する方法でアニメーションを切り替えてアニメーションを作成した後、テーブルを完全に削除したり、アニメーション後の表の表示を切り替えることで、要素を隠すことができます完了です。

が減少する場合、行の数がダウン増大する場合、またはIは、テーブルのすべての行に@animationを追加してアップアニメーションを可能にする：個々の行が追加またはが除去されるためI prefer the *ngIf way.

。