问题

我想使用CSS转换来使< ul> 向下滑动.

< 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上的值设置为大于盒子所能获得的值.

请参阅由Chris Jordan在另一个 JSFiddle演示 .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>




相关问题推荐