我怎樣才能過渡高度:0;高度:自動;使用CSS?
P粉461599845
P粉461599845 2023-08-27 11:59:03
0
2
467
<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>
P粉461599845
P粉461599845

全部回覆(2)
P粉055726146

您應該使用scaleY。

ul {
  background-color: #eee;
  transform: scaleY(0);    
  transform-origin: top;
  transition: transform 0.26s ease;
}
p:hover ~ ul {
  transform: scaleY(1);
}
<p>Hover This</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

我在 jsfiddle 上製作了上述程式碼的供應商前綴版本,並進行了更改你的jsfiddle使用scaleY而不是高度。

編輯# 有些人不喜歡 scaleY 轉換內容的方式。如果這是一個問題,那麼我建議使用 clip 來代替。

ul {
  clip: rect(auto, auto, 0, auto);
  position: absolute;
  margin: -1rem 0;
  padding: .5rem;

  color: white;

  background-color: rgba(0, 0, 0, 0.8);

  transition-property: clip;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul,
h3:active ~ ul,
ul:hover {
  clip: rect(auto, auto, 10rem, auto);
}
<h3>Hover here</h3>
<ul>
  <li>This list</li>
  <li>is clipped.</li>
  <li>A clip transition</li>
  <li>will show it</li>
</ul>
<p>
  Some text...
</p>
P粉242741921

在過渡中使用max-height,而不是height。並將 max-height 的值設為比您的盒子更大的值。

請參考 Chris Jordan 在另一個 JSFiddle 示範 /stackoverflow.com/a/20226830/18706">在這裡回答。

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}
<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板