如何转换高度：0;到height：auto;使用CSS？ [英] How can I transition height: 0; to height: auto; using CSS?

问题描述

我试图使用CSS转换向下滑动< ul> 。

c $ c>< ul> 开始于 height：0; 。在悬停时，高度设置为 height：auto; 。 < / p>

如果我从 height：40px做到这一点， 到 height：auto; ，则它将滑动到 height：0; 然后突然跳到正确的高度。

我还可以不使用JavaScript吗？

div class =snippetdata-lang =jsdata-hide =falsedata-console =falsedata-babel =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;}  

  CSS的两个片段之间的唯一区别是其高度为0，其他高度为40.< hr />< div id = parent0> < h1>悬停我（高度：0）< / h1> < div id =child0>部分内容< br />部分内容< br />部分内容< br />部分内容< br /某些内容< br /> < / div>< / div>< hr />< div id =parent40> < h1>悬停我（身高：40）< / h1> < div id =child40>部分内容< br />部分内容< br />部分内容< br />部分内容< br /某些内容< br /> < / div>< / div>  

解决方案

在转换中使用 max-height ，而不是 height 。

请参阅 JSFiddle演示由Chris Jordan在另一个回答中提供。

  #menu #list {max-height：0; transition：max-height 0.15s ease-out; overflow：hidden;背景：＃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>  

I am trying to make a <ul> slide down using CSS transitions.

The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition,

If I do it from height: 40px; to height: auto;, then it will slide up to height: 0;, and then suddenly jump to the correct height.

How else could I do this without using 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>

解决方案

Use max-height in the transformation and not height. And set a value on max-height to something bigger than your box will ever get.

See JSFiddle demo provided by Chris Jordan in another answer here.

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

这篇关于如何转换高度：0;到height：auto;使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！