似乎没有合适的解决方案。最大高度方法非常好，但在隐藏阶段效果不佳-除非你知道内容的高度，否则会有明显的延迟。

我认为最好的方法是使用最大高度，但仅限于表演阶段。不要在隐藏时使用任何动画。在大多数情况下，这并不重要。

最大高度应该设置为一个非常大的值，以确保任何内容都适合。可以使用过渡持续时间控制动画速度（速度=最大高度/持续时间）。速度不取决于内容的大小。显示整个内容所需的时间将取决于其大小。

document.querySelector（“button”）.addEventListener(“点击”，函数（）{document.querySelector（“div”）.classList.tggle（“hide”）；})分区{最大高度：20000px；过渡：最大高度3000ms；overflow-y：隐藏；}.隐藏{最大高度：0；过渡：无；}<button>切换</button><div class=“hide”>Lorem ipsum dolor坐amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。Lorem ipsum dolor sit amet，ius solet dignissim honestatis ad Mea quem tibque intellegat te。内窥镜检查和检查。所有人都知道领事馆。Vix novum primis称呼no，eam denique sensius et，他的ipsum senserit ne。</div>

我的解决方法是将最大高度转换为精确的内容高度，以获得流畅的动画效果，然后使用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”>接受挑战</按钮>

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

我意识到这条线索已经过时了，但它在某些谷歌搜索中排名靠前，所以我认为它值得更新。

还可以只获取/设置元素自身的高度：

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

您应该在内联脚本标记中的target_box结束标记之后立即转储此Javascript。

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

我使用了最大高度：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>

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

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

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>