CSS3從正常的流動位置到絕對的過渡

我在過去幾次碰到過這個，從來沒有走過一個很好的解決方案。如果我有幾個根據自然文檔流定位的HTML元素。舉例來說，我們假設它是一個簡單的div s堆棧。我想使用CSS3轉換來平滑地將這些元素之一移動到頁面的固定位置（比如0,0），然後返回到正常位置。CSS3從正常的流動位置到絕對的過渡

問題是如果樣式屬性改爲absolute或fixed（如果它之前不存在）將導致位置突然變化並忽略任何轉換指令。因此，我會想象任何這樣的轉換都會涉及某種javascript組件，以找出當前元素的位置以及距離期望位置有多遠等，然後從中動態構建CSS樣式。但是，這似乎是一個可怕的事情，通過什麼似乎是一個微不足道的情況下，雖然。有沒有更好的辦法？

來源

2012-01-19 Toji

是的，我們可以從靜態位置轉換到絕對位置，但實際上我認爲它不會很快（如果有的話）。我很高興能夠從height: px轉換爲height: auto;。

我的猜測是，當瀏覽器必須進行計算以在兩個「不兼容」值之間進行插值時存在某種折衷。因此，如果您設置了height: 20px然後想要轉換爲height: auto，那麼瀏覽器將不得不想像如果它具有位置自動並且計算可能變得密集，會發生什麼情況。它也沒有在jQuery中實現，所以我想它打破了一些測試，或者它只是簡單的哈希。

如果建築師你的CSS知道你需要絕對的總是指窗口的位置，那麼JavaScript是顯着更簡單：你只需要其之間切換偏移和0，0

$(".hover").on("mouseover", function(){ 
    $(this).css({ 
     top: $(this).offset().top * -1, 
     left: $(this).offset().left * -1 
    }) 
});

http://jsfiddle.net/crUFY/

更強大的解決方案將涉及到克隆dom元素並隱藏原始文件，然後將克隆動畫化到窗口的頂部。這樣你可以應用位置：相對於父元素。

來源

2012-01-19 12:05:42 Duopixel

是的，我想這將是關於它的大小。好吧，開發者可以做夢，對吧？感謝小提琴，順便說一句！總是很高興看到概念證明。 – Toji 2012-01-19 16:25:13

「我很高興能夠從高度：px轉換爲高度：auto ;.」在某些情況下，最大高度轉換可以很好地替代它。例如。從最大高度：0px過渡到最大高度：9999px，在過渡結束時，目標元素將以高度自動結束。 – 2013-12-04 10:55:41

CSS3從正常的流動位置到絕對的過渡

回答

相關問題