height: auto 无法用于 transition 动画，因浏览器无法对 “auto” 进行数值插值；应改用 max-height + CSS 变量方案，配合 scrollHeight 动态计算并触发重排，确保动画正确执行。
为什么不能直接用 height: auto 配 transition
CSS 的 transition 无法对 height: auto 做插值计算——浏览器压根不知道“auto”对应多少像素，起始帧和结束帧之间没有可线性变化的数值路径。写 transition: height 0.3s 后点开/收起，要么完全没动画，要么只在收起时有、展开时突兀跳出来，控制台还不会报错。
用 max-height + CSS 变量替代硬编码值
把固定 max-height: 500px 换成 CSS 变量，能避免每次改内容就得手动调上限值。关键不是“多灵活”，而是让 JS 计算后只更新一个变量，CSS 自动响应：
- HTML 中给折叠容器加
style="--target-height: 0" - CSS 里写
max-height: var(--target-height); transition: max-height 0.3s ease-out; - JS 展开时设
el.style.setProperty('--target-height', el.scrollHeight + 'px') - 收起时设
el.style.setProperty('--target-height', '0')
注意：必须在设完高度后立刻触发重排（void el.offsetHeight），否则浏览器可能缓存旧值，动画从 0→0 开始。
scrollHeight 计算前要确保样式已生效
如果元素初始 max-height: 0 且 overflow: hidden，scrollHeight 会返回 0——因为内容被截断了，浏览器测不到真实高度。解决方法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 临时移除
overflow: hidden和max-height，再读scrollHeight，之后立即恢复（但可能闪一下） - 更稳的做法：用
getComputedStyle先查display是否为none，若为none，先设display: block并visibility: hidden（不占布局流），再读scrollHeight，最后清理
别信“设完 max-height 等一帧再读”的方案——requestAnimationFrame 不保证样式已应用，仍可能读到 0。
收起动画结束后的状态清理
动画收起到 max-height: 0 后，内容虽然不可见，但 DOM 仍在渲染流中。若后续 JS 还要操作这个区域（比如重新展开），需注意：
- 别在收起后立刻删掉
max-height内联样式，否则下次展开时变量没值，会 fallback 到 0 - 收起完成时可以加个
transitionend监听，但只监听max-height，别监听opacity——二者过渡时间稍有差异就容易错乱 - 如果内容含表单或焦点元素，收起后记得
el.setAttribute('inert', '')，避免键盘导航误入
最常被忽略的一点：CSS 变量是继承的，但 max-height 不会自动继承父级变量值——必须显式写 max-height: var(--target-height)，漏了这行，变量再准也没用。
