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

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/

仅限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，没有特定的高度。

编辑：向下滚动以获得更新的答案我在做一个下拉列表，看到了这篇文章。。。很多不同的答案，但我决定分享我的下拉列表。。。它并不完美，但至少它将只使用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希望将来有人会发现这很有用。

每当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%演示过渡高度：添加子对象时自动

当我发布这篇文章时，已经有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>

我能够做到这一点。我有一个.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。