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

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

在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%; /**/
}

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

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

根据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＞

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

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

工作示例：

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