我怎樣才能過渡高度:0;高度:自動;使用CSS?
P粉461599845
2023-08-27 11:59:03
<p>我正在嘗試使用 CSS 過渡來使 <code></code></p><ul> 向下滑動。 <p><br /></p>
<p><code></code></p><ul> 從 <code>height: 0;</code> 開始。懸停時,高度設定為 <code>height:auto;</code>。然而,這導致它只是出現,<em>而不</em>過渡,<p><br /></p>
<p>如果我從<code>height: 40px;</code> 到<code>height: auto;</code>,那麼它會向上滑動到<code>height: 0;<ight: 0;<ight: 0;<ight: 0; ;/code>,然後突然跳到正確的高度。 </p>
<p>如果不使用 JavaScript,我還能如何做到這一點? </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#child0 {
height: 0;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent0:hover #child0 {
height: auto;
}
#child40 {
height: 40px;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent40:hover #child40 {
height: auto;
}
h1 {
font-weight: bold;
}</pre>
<pre class="brush:html;toolbar:false;">The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
<h1>Hover me (height: 0)</h1>
<div id="child0">Some content
<br>Some content
<br>Some content
<br>Some content
<br>Some content
<br>Some content
<br>
</div>
</div>
<hr>
<div id="parent40">
<h1>Hover me (height: 40)</h1>
<div id="child40">Some content
<br>Some content
<br>Some content
<br>Some content
<br>Some content
<br>Some content
<br>
</div>
</div></pre>
<p><br /></p></ul></ul>
您應該使用scaleY。
我在 jsfiddle 上製作了上述程式碼的供應商前綴版本,並進行了更改你的jsfiddle使用scaleY而不是高度。
編輯# 有些人不喜歡
scaleY
轉換內容的方式。如果這是一個問題,那麼我建議使用clip
來代替。在過渡中使用
max-height
,而不是height
。並將max-height
的值設為比您的盒子更大的值。請參考 Chris Jordan 在另一個 JSFiddle 示範 /stackoverflow.com/a/20226830/18706">在這裡回答。