我正在尝试使用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>
接受的答案在大多数情况下都有效，但当您的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>
你可以，用一点非语义的小把戏。我通常的方法是设置外部DIV的高度动画，该外部DIV有一个子级，这是一个仅用于测量内容高度的无样式DIV。
函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{var wrapper=document.querySelector（'.measureingWrapper'）；growDiv.style.height=wrapper.clientHeight+“px”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'><div class='measureingWrapper'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div></div></div>
人们希望能够省去.metringWrapper，只需将DIV的高度设置为auto并设置动画，但这似乎不起作用（设置了高度，但没有动画发生）。
函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{growDiv.style.height=“自动”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</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>
