可行但需避开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 动态测高并触发过渡的关键三步
核心不是“设多高”，而是“什么时候设”——顺序错了，浏览器会合并样式计算，跳过动画。
- 先设
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 同步。前者导致视觉卡顿，后者让屏幕阅读器完全不知道当前是展开还是收起。
