可行但需避开max-height:auto和未强制重排：auto无法插值导致跳变；须用js测scrollheight并分三步设值——先0+hidden，再offsetheight触发重排，后设目标高度；收起完补overflow:hidden，并同步aria-expanded。

直接用 max-height 过渡 + overflow: hidden 是可行的，但必须避开 max-height: auto 和未强制重排这两个致命坑。

为什么 max-height: 0 → max-height: auto 没动画

浏览器无法对 auto 做数值插值，过渡会立刻跳变。哪怕写了 transition: max-height 0.3s，只要终点是 auto，就等于没写。

• 别在 CSS 里写 max-height: auto 作为展开目标值
• 硬写死一个足够大的像素值（比如 max-height: 500px）能 work，但内容高度动态变化时容易截断或留白
• 真正自适应的解法只能靠 JS 测出真实 scrollHeight，再设为具体像素值

JS 动态测高并触发过渡的关键三步

核心不是“设多高”，而是“什么时候设”——顺序错了，浏览器会合并样式计算，跳过动画。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 先设 max-height: 0 + overflow: hidden，再调用 element.offsetHeight 强制触发一次重排（reflow）
• 紧接着把 max-height 设为目标 scrollHeight 值（不是 offsetHeight 或 clientHeight，它们不含溢出部分）
• 确保 transition 声明已存在于初始 CSS 中，且只作用于 max-height，不要混用 all

收起后记得补 overflow: hidden

收起动画结束时，max-height 已到 0，但若不手动加 overflow: hidden，滚动条可能闪一下或内容边缘微露。

• 监听 transitionend 事件，在收起完成时补上 overflow: hidden
• 展开时不用额外处理 overflow，因为 max-height 大于内容高度时，hidden 本身已生效
• 连续快速点击时，要清除前一个未完成的 transitionend 监听，否则 max-height 可能卡在中间值

最易被忽略的是：动画中断时的状态残留和 aria-expanded 同步。前者导致视觉卡顿，后者让屏幕阅读器完全不知道当前是展开还是收起。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！