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

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

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>

使用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上重复）

在过渡中使用最大高度，而不是高度。并将最大高度的值设置为比您的长方体所能获得的值更大的值。

请参阅Chris Jordan提供的JSFiddle演示。

#菜单#列表{最大高度：0；过渡：最大高度0.15s缓和；溢出：隐藏；背景：#d5d5d5；}#菜单：悬停#列表{最大高度：500px；过渡：最大高度0.25s；}<div id=“menu”><a>悬停我</a><ul id=“list”><!-- 创建一组，或不创建一组li来查看时间。--><li>项目</li><li>项目</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%; /**/
}

我想添加一个关于如何扩展/折叠以保持文档流的示例，这个示例适用于使用tailwindcss的React应用程序

export function Collapse({ collapsed = true, children }) {
  return (
    <div className="grid">
      <div className="flex flex-col">
        <div className={`transition-all duration-500 overflow-hidden ${collapsed ? 'basis-0' : 'flex-1'}`}>
          {children}
        </div>
      </div>
    </div>
  );
}

深入阅读：https://stackoverflow.com/a/69871346/9226510

我的解决方法是将最大高度转换为精确的内容高度，以获得流畅的动画效果，然后使用transitionEnd回调将最大高度设置为9999px，以便内容可以自由调整大小。

var content=$（'#content'）；content.inner=$（'#content.inter'）；//关闭时需要获取内容大小的内部div//css转换回调content.on（'transitionEnd-webkitTransitionEnd transitiononend oTransitionEnd-msTransitionEnd'，函数（e）{if（content.hasClass（'open'））{content.css（'max-height'，9999）；//尝试将此设置为“无”。。。我敢你！}});$（'#toggle'）.on（'click'，函数（e）{content.tggleClass（“打开关闭”）；content.contentHeight=content.outerHeight（）；if（content.hasClass（'closed'））{//禁用转换&将最大高度设置为内容高度content.removeClass（'transitions'）.css（'max-height'，content.contentHeight）；setTimeout（函数）{//启用和启动转换content.addClass（'转换'）.css({'最大高度'：0，“不透明度”：0});}, 10); // 10ms超时是禁用/启用转换的秘密因素//chrome只需要1ms，但FF需要约10ms，否则会在第一部动画中因某种原因而窒息}否则如果（content.hasClass（'open'））{content.contentHeight+=content.inter.outerHeight（）；//如果已关闭，请将内部高度添加到内容高度内容.css({'max height'：content.contentHeight，“不透明度”：1});}});.转换{过渡：所有0.5秒都是缓进缓出；-webkit转换：所有0.5s都易于输入输出；-moz转换：所有0.5s都易于输入输出；}正文{字体系列：Arial；线高：3ex；}代码{显示：内联块；背景：#fafafa；填充：0 1ex；}#切换{显示：块；填充：10px；边距：10px自动；文本对齐：居中；宽度：30ex；}#内容{溢出：隐藏；边距：10px；边框：1px实心#666；背景：#efefef；不透明度：1；}#内容。内部{填充：10px；溢出：自动；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><div id=“content”class=“open”><div class=“inner”><h3>在<code>height:0</code>和<code>high:auto</code>之间平滑CSS转换</h3><p>一个巧妙的解决方法是使用<code>max-height</code>而不是<code>height</code>，并将其设置为比内容更大的值。问题是浏览器使用此值来计算过渡持续时间。因此，如果您将其设置为＜code＞max-height:1000px＜/code＞，但内容只有100px高，则动画将快10倍</p＞<p>另一种选择是使用JS测量内容高度，并转换到固定值，但如果内容发生变化，则必须跟踪内容并手动调整其大小</p＞<p>此解决方案是两种转换的混合，即转换到测量的内容高度，然后在转换后将其设置为<code>最大高度：9999px</code>，以调整流体内容大小</p＞</div></div><br/><button id=“toggle”>接受挑战</按钮>