编辑：向下滚动以获得更新的答案我在做一个下拉列表，看到了这篇文章。。。很多不同的答案，但我决定分享我的下拉列表。。。它并不完美，但至少它将只使用css进行下拉！我一直在使用transform:translateY（y）将列表转换为视图。。。你可以在测试中看到更多http://jsfiddle.net/BVEpc/4/ 我把div放在每一个li后面，因为我的下拉列表是从上到下的，为了正确地显示它们，这是需要的，我的div代码是：

#menu div {
    transition: 0.5s 1s;
    z-index:-1;
    -webkit-transform:translateY(-100%);
    -webkit-transform-origin: top;
}

并且悬停是：

#menu > li:hover div {
    transition: 0.5s;
    -webkit-transform:translateY(0);
}

因为ul高度设置为可以超过你身体内容的内容，所以我为ul做了这件事：

 #menu ul {
    transition: 0s 1.5s;
    visibility:hidden;
    overflow:hidden;
}

并悬停：

#menu > li:hover ul {
     transition:none;
     visibility:visible;
}

转换后的第二次是延迟，它将在我的下拉列表被动画关闭后隐藏。。。希望以后有人能从中受益。编辑：我真不敢相信人们真的使用了这个原型！此下拉菜单仅用于一个子菜单，仅此而已！！我更新了一个更好的，可以有两个子菜单，用于ltr和rtl方向，支持IE8。LTR的FiddleRTL的Fiddle希望将来有人会发现这很有用。

杰克对最大高度动画化的回答很好，但我发现设置大的最大高度所导致的延迟很烦人。

可以将可折叠内容移动到内部div中，并通过获取内部div的高度来计算最大高度（通过JQuery，它将是outerHeight（））。

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

这里有一个jsfiddle链接：http://jsfiddle.net/pbatey/duZpT

这里有一个jsfiddle，它提供了所需的绝对最小代码量：http://jsfiddle.net/8ncjjxh8/

此解决方案使用了一些技术：

填充底部：100%“hack”，其中百分比是根据元素的当前宽度定义的。有关此技术的更多信息。浮动收缩包装，（需要额外的div来应用浮动清除黑客）非语义使用https://caniuse.com/#feat=css-编写模式和一些转换来撤销它（这允许在垂直上下文中使用上面的填充黑客）

结果是，我们只使用CSS实现了高性能的转换，并使用一个转换函数来平滑地实现转换；圣杯！

当然，这也有缺点！我无法确定如何控制内容被截断的宽度（溢出：隐藏）；由于衬垫底部的裂缝，宽度和高度密切相关。不过，也许有办法，所以我们会回到过去。

https://jsfiddle.net/EoghanM/n1rp3zb4/28/

正文{填充：1em；}.触发器{字号：粗体；}/*.扩展器仅用于浮动清除*/.扩展器：：之后{内容：“”；显示：表格；清晰：两者都有；}.外部{float：左；/*目的：收缩以适应内容*/边框：1px实心绿色；溢出：隐藏；}.内部{过渡：填充底部0.3s，方便进出；/*或者你能想出的任何疯狂的转换函数*/底部填充：0%；/*填充百分比是根据宽度定义的。此级别的宽度等于内容的高度*/高度：0；/*不幸的是，书写模式的改变还有其他的不良影响，比如光标的方向*/写入模式：垂直rl；光标：默认值；/*不需要垂直文本（横向工字梁）*/变换：旋转（-90度）平移X（-100%）；/*撤消写入模式*/变换原点：0 0；边距：0；/*此处的左/右边距将增加高度*/}.inter>div｛white-space:nowrap；｝.extender:hover.intern，/*在展开时保持打开*/.t触发器：悬停+扩展器.内部{填充底部：100%；}<div class=“trigger”>HoverMe</div><div class=“扩展器”><div class=“outer”><div class=“inner”><div>第一项</div><div>内容</div><div>内容</div><div>内容</div>＜div＞长内容不能宽于外部高度，不幸的是＜/div＞<div>最后一项</div></div></div></div>＜div＞在内容之后</div></div>

Jake的最大高度解决方案效果很好，如果硬编码提供的最大高度值不比实际高度大多少（因为否则会出现不期望的延迟和定时问题）。另一方面，如果硬编码值意外为不大于实际高度，元件将不会完全打开。

以下仅限CSS的解决方案还需要硬编码大小应大于大多数实际尺寸。然而，这如果实际大小在某些情况下大于硬编码大小。在这种情况下，转换可能会跳一点，但它永远不会留下部分可见的元素。因此，该解决方案也可用于未知内容，例如数据库，您只需知道内容通常不会更大超过x像素，但也有例外。

想法是使用负值作为边距底部（或边距顶部用于稍微不同的动画），并将内容元素放置到带溢出的中间元素：隐藏。内容的负边距因此减小了中间元件的高度。

以下代码使用边距底部从-150px到0倍。只要内容元素不是高于150px。此外，它使用最大高度上的过渡中间元素从0px到100%。这最终隐藏了中间元素如果内容元素高于150px。对于最大高度，过渡仅用于延迟其应用关闭时一秒钟，而不是为了平滑的视觉效果(因此它可以从0px运行到100%）。

CSS:

.content {
  transition: margin-bottom 1s ease-in;
  margin-bottom: -150px;
}
.outer:hover .middle .content {
  transition: margin-bottom 1s ease-out;
  margin-bottom: 0px
}
.middle {
  overflow: hidden;
  transition: max-height .1s ease 1s;
  max-height: 0px
}
.outer:hover .middle {
  transition: max-height .1s ease 0s;
  max-height: 100%
}

HTML格式：

<div class="outer">
  <div class="middle">
    <div class="content">
      Sample Text
      <br> Sample Text
      <br> Sample Text
      <div style="height:150px">Sample Test of height 150px</div>
      Sample Text
    </div>
  </div>
  Hover Here
</div>

边距底部的值应为负值，并尽可能接近可能达到内容元素的实际高度。如果是绝对的值）越大，则存在与最大高度解决方案，但只要硬编码的大小并不比实际大小大多少。如果绝对值边距底部的值小于变换有点跳跃。在任何情况下，过渡后内容元素被完全显示或完全移除。

有关详细信息，请参阅我的博客文章http://www.taccgl.org/blog/css_transition_display.html#combined_height

每当DOM发生变化时，为跟踪的元素设置style=“”属性。名为变种转换的插件您可以使用CSS进行转换，而不使用黑客。您不必编写任何JavaScript。只需包含JavaScript库并指定要在HTML中查看的属性。你不必使用固定高度的CSS。使用data mutant attributes=“X”设置要跟踪的元素。

<div data-mutant-attributes="height">                                                                      
    This is an example with mutant-transition                                                                                                          
</div>

这使用MutationObserver跟踪DOM中的更改。您不必设置任何内容或使用JavaScript手动设置动画。更改将自动跟踪。然而，由于它使用了MutationObserver，这只会在IE11+中转换。<IE11将看到快照更改（无过渡）。

小提琴手

演示从高度：自动转换到高度：100%演示过渡高度：添加子对象时自动

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

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