帶有高度的自由滑動CSS3動畫：自動

我希望自己的塊元素看起來好像高度已經達到其最大值（如JQuery's progressive show），在它平滑地增長後垂直「推動」任何元素。帶有高度的自由滑動CSS3動畫：自動

這很容易固定height（請max-height從0到想要的大小），但不與height: auto，你不能讓max-height從0到none去（元素將是0像素高一直然後突然出現在動畫的100％）。

我試圖測距transform從scaley(0)到scaley(1)但高度自動「保留」是從過渡的開始（使插入元件後的內容被粗暴地向下移動，而不是光滑，漸進推動）。

來源

2011-02-03 instanceof me

這裏是一個測試用例：http://jsfiddle.net/duopixel/ZMc5B/，呃，它看起來不太好，它可能需要一些js來解決。 – Duopixel 2011-02-04 04:01:12

解決方案是單獨轉換應該移動的所有元素（即將另一個轉換添加到元素之後的內容）。通常，您不能依靠自動迴流進行轉換。

來源

2011-02-03 23:30:04

我沒有看到自動調高，請舉個例子嗎？ – 2011-02-04 10:03:20

邁克爾是對的，任何事情都會應用'自動'值來不會乾淨地動畫。你必須設定定義的高度。我在這裏對Duopixel的jsfiddle進行了一些更改：http://jsfiddle.net/joshvogt/vjXuH/

如果要將高度設置爲每個元素的完美程度，則必須對每個元素應用類併爲每個元素指定高度。該鏈接設置最大元素的高度。

來源

2011-02-06 14:36:37 DuMaurier

看起來好像模擬height: auto;的最佳解決方案可能是動畫max-height。我已經更新DuMaurier的小提琴，它似乎是工作：http://jsfiddle.net/8JLKA/1/

我開始max-height設置爲默認值，然後轉變它:hover到的東西比會需要，500px盒子大得多。這是我第一次搞亂CSS轉換，所以我可能會失去一些至關重要的東西。

更新：好了，我要離開這一點，但它大多一個壞主意。問題是轉換時間與max-height的全部值有關，因此，除非內容的實際高度非常接近max-height的值，否則動畫看起來發生得太快。奇怪的是，當離開高點max-height時，轉換花費了預期的時間。不知道這是爲什麼。另外，緩動也不會正確顯示。

來源

2012-01-17 17:57:20 donut

您可以在任何內容之前使用「pusher」元素（或僞元素）。

<div class="container open"> 
    <div class="pusher"></div> 
    ... the rest of the unknown height content 
</div>

然後過渡推動者的邊緣。

.container { overflow:hidden } 
.pusher { margin-top:-100%; transition:margin-top .5s ease; } 
.open .pusher { margin-top:0%; }

來源

2012-09-26 23:13:43

的另一種技術是使用Responsive Nav，它使用JavaScript來計算目標高度，然後創建的max-height從0到所得到的值的轉變。代碼here。

來源

2013-04-09 11:59:39

帶有高度的自由滑動CSS3動畫：自動

回答

相關問題