我最近一直在转换li元素的最大高度，而不是包装ul。

原因是，与大的最大高度相比，小的最大高度的延迟要少得多（如果有的话），而且我还可以使用ems或rems来设置与li字体大小相关的最大高度值，而不是任意的大数字。

如果我的字体大小是1rem，我会将最大高度设置为3rem（以容纳换行文本）。您可以在这里看到一个示例：

http://codepen.io/mindfullsilence/pen/DtzjE

我意识到这条线索已经过时了，但它在某些谷歌搜索中排名靠前，所以我认为它值得更新。

还可以只获取/设置元素自身的高度：

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

您应该在内联脚本标记中的target_box结束标记之后立即转储此Javascript。

您应该改用scaleY。

上一页{背景色：#eee；变换：缩放Y（0）；变换原点：顶部；转变：转变0.26s；}p： 悬停~ul{变换：缩放Y（1）；}<p>将此悬停</p>＜ul＞<li>咖啡</li><li>茶</li><li>牛奶</li></ul>

我在jsfiddle上制作了上述代码的供应商前缀版本，并将jsfiddl更改为使用scaleY而不是height。

编辑有些人不喜欢scaleY如何转换内容。如果这是一个问题，那么我建议使用剪辑。

上一页{剪辑：矩形（自动，自动，0，自动）；位置：绝对；边距：-1rem 0；衬垫：.5rem；颜色：白色；背景色：rgba（0、0、0和0.8）；过渡特性：剪辑；过渡时间：0.5s；过渡时间函数：立方贝塞尔（0.175、0.885、0.32、1.275）；}h3:悬停~ul，h3：活性~ul，ul：悬停{剪辑：矩形（自动，自动，10rem，自动）；}<h3>悬停在此处</h3>＜ul＞<li>此列表</li><li>被剪裁</li><li>剪辑过渡</li><li>将显示它</li></ul><p>一些文本。。。</p>

您可以从height:0转换到height:auto，前提是您还可以提供最小高度和最大高度。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

我理解这个问题需要一个没有JavaScript的解决方案。但对于那些感兴趣的人来说，这里是我的解决方案，只使用了一点点JS。

好的，因此默认情况下高度将更改的元素的css设置为height:0；打开高度时：自动；。它也有过渡：高度；。但当然，问题是它不会从高度转换到高度：自动；

因此，我所做的是在打开或关闭时将高度设置为元素的scrollHeight属性。这种新的内联样式将具有更高的特异性，并覆盖两种高度：auto；高度：0；并且过渡运行。

打开时，我添加了一个transitioned事件侦听器，它将只运行一次，然后删除内联样式，将其设置为height:auto；这将允许元素在必要时调整大小，就像在这个更复杂的子菜单示例中一样https://codepen.io/ninjabonsai/pen/GzYyVe

关闭时，我会在下一个事件循环循环后立即使用setTimeout删除内联样式，而不会延迟。这意味着高度：自动；被临时覆盖，这允许转换回高度0；

const showHideElement=（元素，打开）=>{element.style.height=element.scrollHeight+“px”；element.classList.tggle（“打开”，打开）；if（打开）{element.addEventListener（'transitionnend'，（）=>{element.style.removeProperty（'height'）；}, {一次：真});}其他{window.setTimeout（（）=>{element.style.removeProperty（'height'）；});}}const menu=document.body.querySelector（“#menu”）；const list=document.body.querySelector（“#menu>ul”）menu.addEventListener（'useenter'，（）=>showHideElement（列表，true））；menu.addEventListener（'useleave'，（）=>showHideElement（list，false））；#菜单>ul{高度：0；溢出：隐藏；背景色：#999；过渡：高度。25s缓和；}#菜单>ul.open{高度：自动；}<div id=“menu”><a>悬停我</a>＜ul＞<li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li></ul></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>