Hailwood Hailwood - 6 months ago 129
CSS Question

How can I transition height: 0; to height: auto; using CSS?

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?



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




Answer

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>