css3高度過渡絕對定位div溢出自動失敗

這個例子是相當selfexplanatory我猜，我不知道，爲什麼div第一次收縮，並比彈出到正確的高度。css3高度過渡絕對定位div溢出自動失敗

這裏是示例代碼

<div class="block"> 
    <div class="abs"> 
    hover me!!<br/> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet 
    </div> 
</div>

和CSS

.block { 
    position: relative; 
    height: 500px; 
    width: 500px; 
} 

.abs { 
    position: absolute; 
    height: 40px; 
    width: 200px; 
    background-color: yellow; 
    overflow: hidden; 
} 

.abs:hover { height: auto; transition: height 1s; }

，這裏是一個小提琴鏈接，內容是：http://jsfiddle.net/3G7vG/

我與鉻釋放版本測試此31.0.1650.63 Debian jessie/sid（238485）在我的Linux機器上

來源

2014-02-13 easteregg

height:auto不支持作爲css3轉換的一部分。

你還是試試min-height，max-height，或transform（使用scalex(aNumberBetweenZeroAndOne)）

http://jsfiddle.net/LefQV/

來源

2014-02-13 09:45:58 Mabedan

這裏有一個時髦的解決方案http://jsfiddle.net/E8Tre/，如果你想讓你的動畫時機正確。答案中的解決方案的問題在於，1秒鐘用於將「最大高度」從40擴展到300，並且每當獲得「.abs」內的內容的高度時，高度的增長將停止，這很可能在我的情況下在1000毫秒前 – Mabedan

，這不是問題，所以感謝解決方案;） – easteregg

因爲你設置的div.abs的高度，以40像素

height: 40px;

改成了汽車

height:auto;

完整的風格是

.abs { 
      position: absolute; 
      height:auto; 
      width: 200px; 
      background-color: yellow; 
      overflow: hidden; 
     }

來源

2014-02-13 10:06:09

試圖以此作爲你的CSS：

.block { 
position: absolute; 
height: 250px; 
width: 250px; 
transition:all 1s; 
-moz-transition:all 1s; 
-o-transition:all 1s; 
-webkit-transition:all 1s; 
overflow:hidden;} 
.abs { 
position: absolute; 
height: 40px; 
width: 200px; 
background-color: yellow; 
overflow: hidden; 
transition:all 1s; 
-moz-transition:all 1s; 
-o-transition:all 1s; 
-webkit-transition:all 1s;} 
.abs:hover { height: 100%; }

try this

來源

2014-02-13 10:07:33

css3高度過渡絕對定位div溢出自動失敗

回答

相關問題