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

接受的答案在大多数情况下都有效，但当您的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>

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

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

我使用的方法是基于字体大小（使用em作为单位）或至少是影响我们想要动画的框的垂直大小的所有内容。然后，如果有任何东西不是以em为单位（例如1px边框），我会在框关闭时将其设置为0，并将所有子对象设置为*。

动画动画显示的是从0到100的字体大小（%）。什么？父级的已知字体大小。

它工作的规则是，动画框中的所有内容必须：

对所有字体大小和行高使用%将em用于所有垂直方向（如高度、边距和顶部/底部填充等）如果将px用于垂直的内容（例如，边框顶部/底部），则在框关闭时应覆盖该内容（例如：边框顶部：0；边框底部：0；）

在某种程度上，您仍然可以使用像素作为参考单位，只需将包装字体大小设置为100px，例如#page｛font-size:100px；｝，因此如果您希望在内部任何地方使用10px，则可以使用0.1em。

这不是任何人都能写的最漂亮的东西，但嘿，这些浏览器并不能为我们提供任何解决这个问题的漂亮方案。一旦箱子的高度无法预测，我们别无选择，只能弄得有些脏，这是我想到的最不脏的东西。

悬停版本：

https://jsfiddle.net/xpsfkb07/1/

#第页{字体大小：calc（（35vw+65vh）/30）；/*只是一些响应性设计作为奖励*/}#滑动轴承箱{背景色：#e8e8e8；可见性：隐藏；字号：0；/*从0到100%设置动画*/不透明度：0；/*可选的*/过渡：0.5s；}a#ahover：悬停~#slidebox{可见性：可见；字体大小：100%；/*从0到100%设置动画*/不透明度：1；/*可选的*/}a#ahover：not（：hover）~#slidebox*{边框顶部：0；边框底部：0；/*在这里放置任何以像素为单位的垂直线，在本例中为边框*/}a#按钮{显示：内联flex；对齐项目：居中；对齐内容：中心；位置：相对；宽度：20em；高度：3em；填充：0.5em；边框：2px实心#0080ff；边界半径：0.4em；背景色：#8fbfef；颜色：#404040；框大小调整：边框框；}#某种形式的{页边距：1em；边距底部：1em；填充：1 m 4 m 1 m 4 mm；背景色：#d8ffd8；边框：1px实心#888888；}#某种形式的输入{显示：内联块；框大小调整：边框框；字体大小：125%；填充：0.5em；宽度：50%；/*任何水平的都可以是px或%*/边界半径：0.4em；边框：1px纯红色；}＜div id＝page＞<a id=ahover href=“#”>悬停我</a><br>下面是滑动框：＜div id＝slidebox＞我是幻灯片框的内容（第1行）<br>我是幻灯片框的内容（第2行）<br><a id=button href=“#”>我是幻灯片框中的某个按钮</a><br>我是幻灯片框的内容（第3行）<br>我是幻灯片框的内容（第4行）。＜div id＝someform＞一个有表格的盒子<br><输入类型=文本值=“文本框”></div>我是幻灯片框的内容（第5行）<br>我是幻灯片框的内容（第6行）。</div>这是在盒子后面。</div>

类别更改版本：

https://jsfiddle.net/8xzsrfh6/

const switch_ele=文档.getElementById（'aclass'）；switch_ele.addEventListener（'click'，函数（）{const box_ele=文档.getElementById（'slidebox'）；box_ele.className=box_ele_className=='显示'？'hide'：'显示'；}，true）；#第页{字体大小：calc（（35vw+65vh）/30）；/*只是一些响应性设计作为奖励*/}#滑动轴承箱{背景色：#e8e8e8；可见性：隐藏；字号：0；/*从0到100%设置动画*/不透明度：0；/*可选的*/转换：.5s；}#幻灯片放映{可见性：可见；字体大小：100%；/*从0到100%设置动画*/不透明度：1；/*可选的*/}#幻灯片隐藏*{边框顶部：0；边框底部：0；/*在这里放置任何以像素为单位的垂直线，在本例中为边框*/}a#按钮{显示：内联flex；对齐项目：居中；对齐内容：中心；位置：相对；宽度：20em；高度：3em；填充：0.5em；边框：2px实心#0080ff；边界半径：0.4em；背景色：#8fbfef；颜色：#404040；框大小调整：边框框；}#某种形式的{页边距：1em；边距底部：1em；填充：1 m 4 m 1 m 4 mm；背景色：#d8ffd8；边框：1px实心#888888；}#某种形式的输入{显示：内联块；框大小调整：边框框；字体大小：125%；填充：0.5em；宽度：50%；/*任何水平的都可以是px或%*/边界半径：0.4em；边框：1px纯红色；}＜div id＝page＞<a id=aclass href=“#”>开关类w/js</a><br>下面是滑动框：＜div id＝slidebox class＝hide＞我是幻灯片框的内容（第1行）<br>我是幻灯片框的内容（第2行）<br><a id=button href=“#”>我是幻灯片框中的某个按钮</a><br>我是幻灯片框的内容（第3行）<br>我是幻灯片框的内容（第4行）。＜div id＝someform＞一个有表格的盒子<br><输入类型=文本值=“文本框”></div>我是幻灯片框的内容（第5行）<br>我是幻灯片框的内容（第6行）。</div>这是在盒子后面。</div>

您可以从height:0转换到height:auto，前提是您还可以提供最小高度和最大高度。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

一句话解决方案：使用填充过渡。这对于大多数情况（如手风琴）来说已经足够了，甚至更好，因为填充值通常不大，所以速度很快。

如果希望动画过程更好，只需提高填充值即可。

parent｛border top:#999 1px solid；｝h1｛margin:.5rem；字体大小：1.3rem｝.儿童{高度：0；溢出：隐藏；背景色：#dedede；过渡：填充。2s易进易出，不透明度。2s容易进易出；填充：0.5雷姆；不透明度：0；}.childre:：之前，.childres:：之后｛content:“”；显示：块；｝.children：：在｛margin-top:-2rem；｝之前.children：：在｛margin-bottom:-2rem；｝之后.父级：悬停.子级{高度：自动；不透明度：1；衬垫：2.5雷姆。5雷姆；/*0.5+abs（-2），确保低于预期最小高度*/}<div class=“parent”><h1>将我悬停</h1><div class=“children”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><div class=“parent”><h1>将我悬停（长内容）</h1><div class=“children”>一些内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br>部分内容<br></div></div><div class=“parent”><h1>悬停我（简短内容）</h1><div class=“children”>一些内容<br>一些内容<br>一些内容<br></div></div>