我正在尝试使用CSS转换制作一个＜ul＞幻灯片。
＜ul＞开始于高度：0；。悬停时，高度设置为height:auto；。然而，这导致它简单地出现，
如果我从高度做：40px；至高度：自动；，那么它将向上滑动到高度：0；，然后突然跳到正确的高度。
如果不使用JavaScript，我怎么能做到这一点？
#子0{高度：0；溢出：隐藏；背景色：#dedede；-moz过渡：高度1s容易；-webkit过渡：高度1s轻松；-o过渡：高度1s容易；过渡：高度1s；}#parent0:悬停#child0{高度：自动；}#孩子40{高度：40px；溢出：隐藏；背景色：#dedede；-moz过渡：高度1s容易；-webkit过渡：高度1s轻松；-o过渡：高度1s容易；过渡：高度1s；}#parent40:悬停#child40{高度：自动；}h1小时{字号：粗体；}两个CSS片段之间的唯一区别是一个高度为0，另一个高度是40。<小时><div id=“parent0”><h1>将我悬停（高度：0）</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><小时><div id=“parent40”><h1>将我悬停（高度：40）</h1><div id=“child40”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>
似乎没有合适的解决方案。最大高度方法非常好，但在隐藏阶段效果不佳-除非你知道内容的高度，否则会有明显的延迟。
我认为最好的方法是使用最大高度，但仅限于表演阶段。不要在隐藏时使用任何动画。在大多数情况下，这并不重要。
最大高度应该设置为一个非常大的值，以确保任何内容都适合。可以使用过渡持续时间控制动画速度（速度=最大高度/持续时间）。速度不取决于内容的大小。显示整个内容所需的时间将取决于其大小。
document.querySelector（“button”）.addEventListener(“点击”，函数（）{document.querySelector（“div”）.classList.tggle（“hide”）；})分区{最大高度：20000px；过渡：最大高度3000ms；overflow-y：隐藏；}.隐藏{最大高度：0；过渡：无；}<button>切换</button><div class=“hide”>Lorem ipsum dolor坐amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。</div>
接受的答案在大多数情况下都有效，但当您的div的高度变化很大时，它就不起作用了——动画的速度不取决于内容的实际高度，而且它看起来会很起伏。
您仍然可以使用CSS执行实际的动画，但您需要使用JavaScript来计算项目的高度，而不是尝试使用auto。不需要jQuery，但如果您想要兼容性，可能需要对其进行一些修改（适用于最新版本的Chrome：）。
window.toggleExpand=函数（元素）{如果（！element.style.height | | element.syle.height=='0px'）｛element.style.height=数组.原型.减少.调用（element.childNodes，函数（p，c）｛return p+（c.offsetHeight ||0）；｝，0）+“px”；}其他{element.style.height=“0px”；}}#菜单#列表{高度：0px；过渡：高度0.3s；背景：#d5d5d5；溢出：隐藏；}<div id=“menu”><input value=“Toggle list”type=“button”onclick=“toggleExpand（document.getElementById（'list'））；”><ul id=“list”><!-- 适用于动态大小的内容。--><li>项目</li><li><div style=“高度：100px；宽度：100px，背景：红色；”></div></li><li>项目</li><li>项目</li><li>项目</li></ul></div>
使用CSS3过渡设置高度动画的一个视觉解决方法是设置填充动画。
你不太能得到完全的擦除效果，但在过渡持续时间和填充值之间进行切换应该会让你足够接近。如果您不想显式设置高度/最大高度，这应该是您想要的。
div {
height: 0;
overflow: hidden;
padding: 0 18px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
div.animated {
height: auto;
padding: 24px 18px;
}
http://jsfiddle.net/catharsis/n5XfG/17/（从jsFiddle上方的stephband上重复）
