ngAnimateとanimate.cssで子要素をアニメ化する

Question

私はAngular 1.5を使用するアプリケーションを持っています。単純なアニメーションを処理するにはngAnimateとanimate.cssを使用しています。私は子要素をアニメーション化し、ng-ifを介してng-enter/leaveがその親に適用される必要がある問題に遭遇しています。ここで

は私のマークアップです：ここでは

<div class="parent" ng-if="vm.showPanel"> 
    <div class="child animated"> <!--This is the element that need the animation--> 
    some content 
    </div> 
</div> 

は、CSSです：

.parent.ng-enter > div.child{ 
    animation: bounceInRight 1s; 
} 
.parent.ng-leave > div.child{ 
    animation: bounceOutRight 1s; 
} 

私は親要素にアニメーションを適用する場合、それはうまく動作しますが、私はその子要素でそれを必要とします。助言がありますか？？私はこれがかなりまっすぐなものでなければならないことを知っているが、私は何が欠けているのか分からない。事前におかげで。

Answer 1

親がアニメーション化されている場合にのみ機能すると思います。 ng-ifがDOM要素を削除しているときに、ngAnimateがDOM要素をどのように保持しているかを考えてください。親が所定の位置に保持されていなければ（すなわち、アニメーションによって）、子供はそれを用いて消滅する。

を使用し、親に何らかのダミーアニメーションを追加して、子供がアニメーションできるほど長く留まるようにしてください。あなたはすぐに再び現れる/消えるしたい親の下に他の子供を持っている場合は

は、のようないくつかのより多くのCSSルールを追加します。同じ問題に実行している人にとって

.parent.ng-leave > .other-child { 
    display: none; 
    visibility: hidden; 
} 

Answer 2

、解決策は、すべて私が持っていた時期についてでした親エレメントにアニメーションを適用するには、これをngAnimateがDOM内に保持し、子エレメントとともに削除しないようにしました（https://stackoverflow.com/a/38878432/6301843参照）。

.parent.ng-enter { 
    animation: fadeIn 800ms; 
} 
.parent.ng-leave { 
    animation: fadeOut 800ms; 
} 
.parent.ng-enter > div.child { 
    animation: bounceInRight 1s; 
} 
.parent.ng-leave > div.child { 
    animation: bounceOutRight 1s; 
} 

はまた、あなたがあなたのマークアップには、このNG-アニメイト-子供=「true」を追加する必要があります。

CSS

はこのように見てしまいました。だから私のHTMLは次のように見てしまった：

​​