動畫頁面重排？

我正在切換div的內容（淡出舊內容，然後淡入新內容），因爲它們的內容略有不同，當它們發生改變時，會對其下面的所有內容進行嚴重的重組。動畫頁面重排？

我的問題是，有沒有辦法讓這個動作順利？

我懷疑幾乎唯一可行的方法是使用javascript來提前確定起始和結束元素的高度（在我的情況下，我只處理垂直對齊移動的塊）的高度是，並直接分配這些值。一旦我這樣做，我確信CSS3過渡將應用一個愉快的動畫。

有沒有可能的方法來得到這個沒有指定明確的尺寸？我似乎記得有些時候，有經驗的項目會以動畫的方式在頁面中移動。這讓我希望它可以用CSS來完成。

2012-07-15 Steven Lu

我通常會創建一個臨時（不可見）元素來存放新內容以計算其高度。之後，原始元素可以從其當前高度動畫到新計算的高度。

重要的是，創建的臨時元素是原始元素的相合，使所有必要的風格級聯和得到正確繼承（例如，計算新的內容高度是無用的，如果沒有正確的是font-size施加）

雖然明確設置不同的高度之間動畫（即JS如上所述）可以與CSS3（transition: height .5s ease;）來實現，也不會對於隱式設置不同的高度（即，修改與height:auto元素含量）
工作

2012-07-15 01:27:47

是的，如果有的話，它會很酷一種強制隱式設置高度的方式也是動畫的。 – 2012-07-15 01:30:04

回答