我使用的方法是基于字体大小（使用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>

Flexbox解决方案

赞成的意见：

易于理解的无JS平滑过渡

欺骗：

元素需要放在固定高度的柔性容器中

它的工作方式是始终具有灵活的基础：在元素上自动添加内容，并转换为灵活增长和灵活收缩。

编辑：受Xbox One界面启发，改进了JS Fiddle。

* {边距：0；填充：0；框大小调整：边框框；过渡：0.25s；字体系列：单空间；}正文{边距：10px 0 0 10px；}.box格式{宽度：150px；高度：150px；边距：0 2px 10px 0；背景：#2d333b；边框：实心10px#20262e；溢出：隐藏；显示：内联flex；弯曲方向：柱；}.空格{弹性基础：100%；挠曲生长：1；挠曲收缩：0；}p型{弹性基础：自动；柔性增长：0；挠曲收缩：1；背景：#20262e；填充：10px；宽度：100%；文本对齐：左侧；颜色：白色；}.box:悬停.space{柔性增长：0；挠曲收缩：1；}.box：悬停p{挠曲生长：1；挠曲收缩：0；}<div class=“box”><div class=“space”></div><p>超级Metroid Prime Fusion</p></div><div class=“box”><div class=“space”></div><p>《生化危机2》翻拍</p></div><div class=“box”><div class=“space”></div><p>Yolo游戏</p></div><div class=“box”><div class=“space”></div><p>《最终幻想7》重制版+所有附加DLC+金色礼帽</p></div><div class=“box”><div class=“space”></div><p>德普维尔</p></div>

JS小提琴

使用CSS3过渡设置高度动画的一个视觉解决方法是设置填充动画。

你不太能得到完全的擦除效果，但在过渡持续时间和填充值之间进行切换应该会让你足够接近。如果您不想显式设置高度/最大高度，这应该是您想要的。

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/（从jsFiddle上方的stephband上重复）

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

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

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

工作示例：

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

我结合了最大高度和负边距来实现这个动画。

我使用了最大高度：2000px，但如果需要，您可以将该值设置为更高的值。我为展开时的最大高度和折叠时的边距设置动画。

js部分只是点击，对于纯css解决方案，可以用：hover或checkbox替换。

到目前为止，我只能看到两个问题，

过渡时间有限。（我只添加了2次计时）如果在下拉列表折叠时再次单击，它将跳转。

这是结果

[…document.querySelectorAll（'.ab'）].forEach（包装器=>{wrapper.addEventListener（'click'，函数（）{this.classList.tggle（'active'）；});});* {边距：0；框大小调整：边框框；}.c文件{溢出：隐藏；}.个项目{宽度：100%；可见性：隐藏；最大高度：0；边距底部：-2000px；-webkit过渡：边缘0.6s立方bezier（1，0，1，1），最大高度0s 0.6s线性，可见性0s 0.6s直线；过渡：边缘0.6s立方贝塞尔（1，0，1，1），最大高度0.6s线性，可见性0.6s线性；}.项>*{填充：1rem；背景色：#ddd；-webkit过渡：背景色0.6s轻松；过渡：背景色0.6s轻松；}.items>*：悬停{背景色：#eee；}.ab文件{填充：1rem；光标：指针；背景：#eee；}.ab活动+.c.项目{最大高度：2000px；边距底部：0；可见性：可见；-webkit过渡：最大高度0.6s立方bezier（1，0，1，1）；过渡：最大高度0.6s立方bezier（1，0，1，1）；}下拉列表{右边距：1rem；}.包装器{显示：-webkit框；显示：柔性；}<div class=“wrapper”><div class=“下拉列表”><div class=“ab”>仅文本</div><div class=“ab”>仅文本</div><div class=“ab”>下拉列表</div><div class=“c”><div class=“items”><p>项目</p><p>项目</p><p>项目asl；dk l；卡斯尔；d sa；lk语言</p><p>项目sal；千分之三</p><p>项目</p></div></div><div class=“ab”>仅文本</div><div class=“ab”>仅文本</div></div><div class=“下拉列表”><div class=“ab”>下拉列表</div><div class=“c”><div class=“items”><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p></div></div><div class=“ab”>text</div></div><div class=“下拉列表”><div class=“ab”>占位符</div><div class=“ab”>下拉列表</div><div class=“c”><div class=“items”><p>项目</p><p>项目</p></div></div><div class=“ab”>占位符</div><div class=“ab”>占位符</div><div class=“ab”>占位符</div></div></div><h1>要推送的文本</h1>