问题？容器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