ngAnimateを追加してdivを追加してdivを移動したときにスムーズに遷移する

Question

2つのdivを1つずつ表示します。

先頭のdivはngAnimateで公開され、2番目のdivがプッシュされます。

translateYアニメーションを使用して、上のdivが表示されるようにしたいと思います。

@keyframes enter_not_smooth { 
    from {transform: translateY(-100px);} to {transform: translateX(0px);} 
} 

@keyframes leave_not_smooth { 
    from {transform: translateY(0px);} to {transform: translateY(-100px);} 
} 

問題：トップdiv要素が明らかにされて下のdivがスムーズに動かない、それは代わりに、それは最終的な位置にジャンプします。

トップのdivを表示するために高さのアニメーションを使用すると、最下位のdivが表示されるので、下のdivがスムーズに移動します。

@keyframes enter_smooth { 
    from {height: 0px;} to {height: 100px;} 
} 

@keyframes leave_smooth { 
    from {height: 100px;} to {height: 0px;} 
} 

あなたは明確にhttps://jsfiddle.net/9bz4Lwxa/105/

質問必要がある場合は、このjsfiddleを参照してください：トップのdiv同様の明らかなアニメーションを実現します私は移動Yプロパティを使用して滑らかなアニメーションを実現することができます任意の方法または別のプロパティがありますが高さが成長しないが、フルサイズであり、ちょうど途中から一番下のdivをプッシュしますか？

ありがとうございます。

Answer 1

これは厳しいもので、何時間も何時間もかけて達成しようと努力してきました。私が思いついた唯一の実用的な解決策は、実際には複雑であり、余分なコードのすべてに価値があるわけではありません。

transformを使用して要素をアニメーション化すると、バウンディングボックスは静的（DOMシーンの背後にあるようです）のままであり、兄弟要素に影響を与えないようにアニメートされません。参考までに、私は次のように読んでいます：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

高さ/幅/などをアニメーション化する代わりに（これはブラウザで再ペイント/リフローを引き起こすため）、transformのアニメーションを使用することに頼っています。苦境。

私はここにあなたのフィドルに基づい例作成しました： https://jsfiddle.net/tommywhitehead/5q6wec92/1/

注：それは（どのような場所遷移タイミング機能を読んでいないので、あなたは非伝統的な方法でngAnimateを注入される可能性がありますように見えますが.ng-enter右の時間に.ng-enter-active）しかし、これはあなたに正しい考えを与えるはずだと思います。

これは、多くの開発者にとって大きな問題であったため、大手ベンダーがこれを何とか解決できることを願っています。

希望に役立ちます！