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

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

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>

没有最大高度，使用相对定位，在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>

我想添加一个关于如何扩展/折叠以保持文档流的示例，这个示例适用于使用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”>接受挑战</按钮>

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

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