可以通过使用片段路径创建反向（塌陷）动画来实现这一点。

#子0{显示：无；}#parent0:悬停#child0{显示：块；动画：高度动画；动画持续时间：200ms；动画计时功能：线性；动画填充模式：向后；动画迭代次数：1；动画延迟：200ms；}@关键帧高度动画{0% {剪辑路径：多边形（0%0%，100%0.00%，100%0%，0%0%）；}100% {剪辑路径：多边形（0%0%，100%0.00%，100%100%，0%100%）；}}<div id=“parent0”><h1>将我悬停（高度：0）</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>

我理解这个问题需要一个没有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>

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

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

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

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

根据MDN Web Docs，CSS转换规范中故意排除了auto值，因此在网格和柔性布局中使用height:100%、top或flex属性，而不是height:auto。

展开/折叠覆盖

.grid容器{显示：栅格；位置：绝对；}.内容{背景：浅绿色；高度：0；溢出：隐藏；过渡：1s；}span:hover+.gridcontainer.content{高度：100%；}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p＞

展开/折叠滑动覆盖

.grid容器{显示：栅格；位置：绝对；溢出：隐藏；指针事件：无；/*以实现与容器下方元素的交互*/}.内容{背景：浅绿色；指针事件：自动；位置：相对；顶部：-100%；过渡：1s；}span:hover+.gridcontainer.content{顶部：0；}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p＞

在文档流中展开/折叠

html格式{显示：栅格；}正文{显示：柔性；弯曲方向：柱；}.内容{背景：浅绿色；弹性基础：0；溢出：隐藏；过渡：1s；}span：悬停+内容{挠曲：1；}<span>悬停在我上方</span><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区><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。

无近似值。

诀窍是使用隐藏和复制的div让浏览器了解100%的含义。

每当您能够复制要设置动画的元素的DOM时，此方法都适用。

.外部{边框：红色虚线1px；位置：相对；}.虚拟{可见性：隐藏；}.真实{位置：绝对；背景：黄色；高度：0；过渡：高度0.5s；溢出：隐藏；}.outer:悬停>.real{高度：100%；}将鼠标悬停在下面的框上：<div class=“outer”><!-- 要设置动画的实际元素--><div class=“real”>不可预测的内容不可预测内容不可预知内容不可预见内容不可预料内容不可预计内容不可预期内容不可预报内容不可预言内容内容不可预测内容不可预知内容</div><!-- 要设置动画的元素的精确副本。--><div class=“dummy”aria hidden=“true”>不可预测的内容不可预测内容不可预知内容不可预见内容不可预料内容不可预计内容不可预期内容不可预报内容不可预言内容内容不可预测内容不可预知内容</div></div>