ngIfと子どもアニメーション - Angular4

Question

私は角4で以下のテンプレートがあります。

<button (click)="isVisible = !isVisible" >Toggle</button> 

<div class="global-block" *ngIf="isVisible" > 
    <div class="content" [@slideRightLeft]> 
     ... some content here ... 
    </div> 
    <div class="overlay" [@fadeIn]></div> 
</div> 

を私はすでにトリガーと遷移を使用して、両方のslideRightLeftとfadeInアニメーションを作成しました。

問題は、それが最初のトグル（isVisible == true）のために働くということではなく、私は（isVisible == false、.global-blockが瞬時に隠された、子供のアニメーションが表示されていない場合）それを隠すとき。

は、私は本当に子どもたちの要素のための2つの異なるアニメーションを持つようにしたいが、私はまた、トグルする必要がある.global-block

ngIfを遅らせる方法はありますか？または私のアプローチが良くないのでしょうか？

Answer 1

Yea ngIfは、それらのオブジェクトをすべて直ちに削除し、すべての子孫および関連するアニメーションを削除します。アニメーションが完了するのを待つか、DOMから削除しない別の隠蔽方法（visibility + opacity）を使用することができます。

実際にアニメーション状態にすべてをラップすることができます.ngIfを使用する必要はないかもしれません。文字列を使用して、任意の数の異なるアニメーション状態を比較し、それに応じてスタイルを設定することができます。つまり、ボタンをクリックした状態、1000ms前にボタンをクリックした状態、別の「アニメーションを超えた状態」を持つことができます（これらの文字列は文字通り...使用しないでください）。これにより、ビヘイビアがより予測可能になります。