我怎样才能过渡高度：0；高度：自动；使用CSS？-PHP中文网问答

我正在尝试使用 CSS 过渡使

height: 0;

height:auto;

而不

如果我从 height: 40px; 到 height: auto;，那么它会向上滑动到 height: 0;，然后突然跳到正确的高度。

如果不使用 JavaScript，我还能如何做到这一点？

#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;
}

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>

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); }

#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">  <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </div>

全部回复(2)

P粉0557261462023-08-28 10:37:41 2楼

您应该使用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 代替。

<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>

赞 +0

添加回复

P粉2427419212023-08-28 00:29:46 1楼

在过渡中使用max-height，而不是height。并将 max-height 的值设置为比您的盒子更大的值。

请参阅 Chris Jordan 在另一个 JSFiddle 演示 /stackoverflow.com/a/20226830/18706">在这里回答。