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

填充底部：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>

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

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

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

没有最大高度，使用相对定位，在li元素上工作，并且是纯CSS：

除了Firefox，我没有在其他任何地方进行过测试，尽管从CSS来看，它应该可以在所有浏览器上运行。

小提琴：http://jsfiddle.net/n5XfG/2596/

CSS

.wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

HTML

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

接受的答案在大多数情况下都有效，但当您的div的高度变化很大时，它就不起作用了——动画的速度不取决于内容的实际高度，而且它看起来会很起伏。

您仍然可以使用CSS执行实际的动画，但您需要使用JavaScript来计算项目的高度，而不是尝试使用auto。不需要jQuery，但如果您想要兼容性，可能需要对其进行一些修改（适用于最新版本的Chrome：）。

window.toggleExpand=函数（元素）{如果（！element.style.height | | element.syle.height=='0px'）｛element.style.height=数组.原型.减少.调用（element.childNodes，函数（p，c）｛return p+（c.offsetHeight ||0）；｝，0）+“px”；}其他{element.style.height=“0px”；}}#菜单#列表{高度：0px；过渡：高度0.3s；背景：#d5d5d5；溢出：隐藏；}<div id=“menu”><input value=“Toggle list”type=“button”onclick=“toggleExpand（document.getElementById（'list'））；”><ul id=“list”><!-- 适用于动态大小的内容。--><li>项目</li><li><div style=“高度：100px；宽度：100px，背景：红色；”></div></li><li>项目</li><li>项目</li><li>项目</li></ul></div>