当其中一个高度为自动时，当前无法在高度上设置动画，必须设置两个显式高度。

我一直使用的解决方案是先淡出，然后缩小字体大小、填充和边距值。它看起来不像擦拭器，但它没有静态高度或最大高度。

工作示例：

/*最终显示器*/#菜单#列表{边距：.5em 1em；填充：1em；}/*隐藏，隐藏*/#menu:not（：hover）#列表{字体大小：0；边距：0；不透明度：0；填充：0；/*淡出，然后收缩*/过渡：不透明度.25s，字体大小.5s.25s，余量.5s.25s，填充.5s.25s；}/*显示*/#菜单：悬停#列表{/*取消闪烁，然后淡入*/过渡：字体大小.25s，边距.25s，填充.25s，不透明度.5s.25s；}<div id=“menu”><b>悬停我</b><ul id=“list”><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li></ul></div><p>另一段</p＞

将高度设置为自动并转换最大高度。

在Chrome v17上测试

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}

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

您可以从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;
}

一句话解决方案：使用填充过渡。这对于大多数情况（如手风琴）来说已经足够了，甚至更好，因为填充值通常不大，所以速度很快。

如果希望动画过程更好，只需提高填充值即可。

parent｛border top:#999 1px solid；｝h1｛margin:.5rem；字体大小：1.3rem｝.儿童{高度：0；溢出：隐藏；背景色：#dedede；过渡：填充。2s易进易出，不透明度。2s容易进易出；填充：0.5雷姆；不透明度：0；}.childre:：之前，.childres:：之后｛content:“”；显示：块；｝.children：：在｛margin-top:-2rem；｝之前.children：：在｛margin-bottom:-2rem；｝之后.父级：悬停.子级{高度：自动；不透明度：1；衬垫：2.5雷姆。5雷姆；/*0.5+abs（-2），确保低于预期最小高度*/}<div class=“parent”><h1>将我悬停</h1><div class=“children”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><div class=“parent”><h1>将我悬停（长内容）</h1><div class=“children”>一些内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br></div></div><div class=“parent”><h1>悬停我（简短内容）</h1><div class=“children”>一些内容<br>一些内容<br>一些内容<br></div></div>