我正在尝试制作 <ul>
使用 CSS 过渡向下滑动。
<ul>
开始于 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>
最佳答案
在转换中使用 max-height
而不是 height
。并将 max-height
的值设置为比您的盒子所能达到的更大的值。
参见 JSFiddle demo由 Chris Jordan 在另一个 answer 中提供在这里。
#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>
关于css - 如何过渡高度 : 0; to height: auto; using CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3149419/