我能够做到这一点。我有一个.child和一个.parent div。子div完全符合父div的宽度/高度，具有绝对定位。然后设置平移属性的动画，将其Y值降低100%。它的动画非常流畅，没有任何问题或缺点，就像这里的任何其他解决方案一样。

类似这样，伪代码

.parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}

您可以在.parent上指定一个高度，单位为px，%，或保留为auto。这个div然后在向下滑动时屏蔽掉.child 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>

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

当我发布这篇文章时，已经有30多个答案了，但我觉得我的答案比杰克已经接受的答案要好。

我对简单地使用最大高度和CSS3转换产生的问题并不满意，因为正如许多评论人士所指出的，你必须将最大高度值设置得非常接近实际高度，否则会延迟。有关该问题的示例，请参阅此JSFiddle。

为了解决这个问题（虽然仍然不使用JavaScript），我添加了另一个转换转换的HTML元素：translateY CSS值。

这意味着同时使用了max-height和translateY：max-heith允许元素向下推它下面的元素，而translateY提供了我们想要的“即时”效果。最大高度的问题仍然存在，但其影响有所减弱。这意味着你可以为你的最大高度值设置一个更大的高度，而不用担心它。

总的好处是，在转换回（塌陷）时，用户可以立即看到translateY动画，因此最大高度需要多长时间并不重要。

解决方案为Fiddle

正文{字体系列：无衬线；}.切换{位置：相对；边框：2px实心#333；边界半径：3px；边距：5px；宽度：200px；}.切换标题{边距：0；填充：10px；背景色：#333；颜色：白色；文本对齐：居中；光标：指针；}.拨动高度{背景色：番茄；溢出：隐藏；过渡：最大高度。6s轻松；最大高度：0；}.tggle：悬停.tggle高度{最大高度：1000px；}.tggle转换{填充：5px；颜色：白色；转换：转换。4s轻松；变换：translateY（-100%）；}.tggle：悬停.tggle变换{变换：translateY（0）；}<div class=“toggle”><div class=“toggle header”>切换！</div><div class=“toggle height”><div class=“toggle transform”><p>内容</p＞<p>内容</p＞<p>内容</p＞<p>内容</p＞</div></div></div><div class=“toggle”><div class=“toggle header”>切换！</div><div class=“toggle height”><div class=“toggle transform”><p>内容</p＞<p>内容</p＞<p>内容</p＞<p>内容</p＞</div></div></div>

仅限CSS的灵活高度解决方案

我偶然发现了一个使用灵活行为的奇怪解决方案。它至少适用于Chrome和Firefox。

首先，高度转换仅在0和100%之间有效，两个数值。由于“auto”不是数值，因此分数在0和“自动”之间不存在增量。100%是灵活的值，因此不需要特定高度。其次，隐藏内容的外部容器和内部容器都必须设置为display：flex with flex direction：column。第三，外部容器必须具有高度属性。仅当所有内容都包含在外部容器中时，将其设置为0才能保持平滑过渡，因为弯曲行为优先于高度。Edit:Json建议使用height:fit内容，这样容器下面的任何内容都会被向下推。

.外部容器｛高度：0；显示：flex；flex方向：列；｝.内部容器｛display：flex；flex direction:column；｝.隐藏内容｛高度：0；不透明度：0；过渡：高度1s 0.5s进出，不透明度0.5s进出；/*过渡淡出：首先淡出不透明度，然后在延迟等于不透明度持续时间后收缩高度*/}.t触发器：悬停+.内部容器>.隐藏内容｛高度：100%；不透明度：1；过渡：高度1s进出，不透明度0.5s 1s进出；/*过渡：首先展开高度，然后在等于高度持续时间的延迟后淡入不透明度*/}<div class=“outer container”><a href=“#”class=“trigger”>悬停以显示内部容器的隐藏内容</a><div class=“内部容器”><div class=“hidden content”>这是隐藏内容。当由悬停触发时，其高度从0过渡到100%，这会将同一容器中的其他内容逐渐向下推</分区>＜div＞在同一个容器中，当隐藏内容的高度从0过渡到100%时，其他内容会逐渐向下推</分区></div></div>

按“运行代码段”按钮查看正在运行的转换。它只是CSS，没有特定的高度。

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

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