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 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>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>
http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css