height: auto无法实现展开动画，因浏览器无法计算auto的具体像素值；必须用max-height配合overflow: hidden，并通过JS读取scrollHeight或预估高度来设置具体数值。
直接用 height: auto 做展开动画一定会失败——浏览器根本没法算“auto 是多少像素”，动画就只剩跳变或卡住。
为什么 max-height 能动，但 height: auto 不能动
因为 CSS 的 transition 只能插值计算两个具体数值之间的中间帧，比如 max-height: 0px → max-height: 240px。而 height: auto 不是数值，是布局指令，浏览器在动画开始前甚至不知道它该占多高。
- 写
height: 0→height: auto，实际效果等同于height: 0→height: 240px（假设内容高 240px），但浏览器不会自动读这个 240px，所以动画跳过中间过程 -
max-height是数值属性，只要起止值都具体，就能过渡；但它不是“真实高度”，只是个上限，所以必须配overflow: hidden才不溢出 - 别信
max-height: none—— 它不触发过渡，等价于没写值，得用具体像素，比如max-height: 300px
怎么设 max-height 的目标值才不卡顿也不截断
目标值太小，内容被砍掉；太大，收起时拖尾明显，尤其低端机上会感知到“悬停感”。这不是靠猜，而是按场景分两路处理：
- 静态内容（如 FAQ 固定条目、已知文案）：预估最大可能高度，加 20–50px 余量，比如
max-height: 420px。别用9999px，它会让收起动画慢半拍 - 动态内容（如 API 渲染的列表、用户输入的富文本）：必须用 JS 读
element.scrollHeight，再赋给style.maxHeight。注意要在 DOM 渲染完成后再读，否则可能拿到 0 —— 图片未加载、字体未就绪都会影响结果 - 移动端 Safari 有坑：
transform或will-change: transform会让scrollHeight返回错误值，临时方案是展开前移除该样式，动画完再加回
JS 切换类时最容易漏掉的三步强制重排
只写 el.classList.add('show') 是不够的。浏览器还没来得及测量真实高度，max-height 就已经从 0 开始过渡了，结果就是“0 → 0”不动。
立即学习“前端免费学习笔记（深入）”；
- 展开流程必须分三步：
el.style.maxHeight = '0'→void el.offsetHeight（强制重排）→el.style.maxHeight = el.scrollHeight + 'px' - 收起流程反过来：
el.style.maxHeight = el.scrollHeight + 'px'→void el.offsetHeight→el.style.maxHeight = '0' - 判断当前状态别看
getComputedStyle(el).maxHeight，它可能缓存旧值；改用el.classList.contains('show')
overflow: hidden 不是可选项，是生效前提
没它，max-height: 0 也拦不住内容显示；有了它，才能让超出部分真正“不可见”，动画才看得见。
-
overflow: hidden必须写在初始和展开两个状态共用的类里，不能只加在.show中 - 如果内容里有
position: absolute子元素，它们会逃逸出overflow: hidden区域，得额外加overflow: hidden到父容器或约束其top/left - 别用
visibility: hidden替代——它不占空间但不裁剪内容，动画还是失效
真正麻烦的不是写几行 CSS，而是 JS 读高度的时机、Safari 的 transform 干扰、以及 overflow 和绝对定位的组合陷阱——这些地方一漏，动画就只剩“啪”一下。
