对于每个状态，使用具有不同过渡缓和和延迟的最大高度。

HTML格式：

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

CSS:

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

参见示例：http://jsfiddle.net/0hnjehjc/1/

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

工作示例：

/*最终显示器*/#菜单#列表{边距：.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＞

在过渡中使用最大高度，而不是高度。并将最大高度的值设置为比您的长方体所能获得的值更大的值。

请参阅Chris Jordan提供的JSFiddle演示。

#菜单#列表{最大高度：0；过渡：最大高度0.15s缓和；溢出：隐藏；背景：#d5d5d5；}#菜单：悬停#列表{最大高度：500px；过渡：最大高度0.25s；}<div id=“menu”><a>悬停我</a><ul id=“list”><!-- 创建一组，或不创建一组li来查看时间。--><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li></ul></div>

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

#子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>

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

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

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

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

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

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

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>