css height:0到height:auto 的动画
问题?容器height:0到height:auto没有动画效果
#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;
}
<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)
#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>
原文章为https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css