當div被另一個div移動時平滑過渡ngAnimate和translate

我有兩個div，一個在另一個之上。當div被另一個div移動時平滑過渡ngAnimate和translate

頂部div顯示ngAnimate並推下第二個股票。

我想使用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;} 
}

請參見本文的jsfiddle如果你需要澄清https://jsfiddle.net/9bz4Lwxa/105/

問題：有什麼辦法可以實現通過平移Y財產或其他財產流暢的動畫效果，將達到類似的露出動畫其中頂格不是在高度上增長，而是全尺寸，只是將底部的div推開？

謝謝。

來源

2016-08-04 jalbasri

這是一個艱難的，我花了幾小時，幾小時，幾小時試圖完成。我想出的唯一工作解決方案非常複雜，不值得所有額外的代碼。

問題是，當您使用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在正確的時間），但我認爲這應該給你正確的想法。

我希望大廠商能以某種方式解決這個問題，因爲這對許多開發者來說都是一個大問題。

希望有幫助！

來源

2016-08-04 21:35:57

當div被另一個div移動時平滑過渡ngAnimate和translate

回答

相關問題