移动端折叠面板抖动主因是max-height与真实高度不匹配导致重排失准；9999px会拉平动画曲线加剧卡顿；应设合理固定值如24em或360px，动态场景需先置0、读offsetHeight再设scrollHeight，并确保overflow: hidden作用于直接控制高度的元素。
移动端折叠面板展开时抖动，本质是浏览器在重排（reflow）过程中对高度估算失准，不是动画本身的问题，而是max-height值与真实内容高度不匹配导致的视觉撕裂。
为什么max-height设成9999px反而更抖？
这个值会让浏览器在收起末尾阶段“匀速走过”大量冗余像素，动画曲线被拉平，用户感知就是“卡一下再突然收严”。尤其在低端安卓 WebView 或 iOS 15–16 的 Safari 中，渲染管线对超大数值插值响应迟钝，配合异步加载的图片或字体回流，抖动会放大数倍。
- 避免用
vh、%、auto——它们无法参与 CSS 插值计算 - 安全上限建议按内容密度反推：
max-height: 24em（约覆盖 10 行常规文本 + padding）或max-height: 360px（含图标/小图的列表项 × 8） - 若内容高度波动超过 ±20%，纯 CSS 就不该扛——得切 JS 动态读
scrollHeight
如何让scrollHeight读取不触发闪屏？
常见错误是在 click 回调里直接 el.style.maxHeight = el.scrollHeight + 'px'，此时 DOM 尚未完成插入或样式更新，scrollHeight 返回的是旧值，或者强制同步重排失败，导致动画从 0 直接跳到终态。
- 展开前先设
el.style.maxHeight = '0'，再立即读一次el.offsetHeight（触发重排） - 再设目标值：
el.style.maxHeight = el.scrollHeight + 'px' - 收起时监听
transitionend，过滤propertyName === 'max-height'，结束后清空内联样式：el.style.maxHeight = ''
抖动还可能来自overflow和transform冲突
当折叠面板父容器用了 transform: translateZ(0) 或 will-change: transform，会创建新的层叠上下文，导致子元素的 overflow: hidden 失效——内容实际已溢出，只是被裁剪在局部层内，滚动时就会出现“文字悬空”或“边缘撕裂”。
立即学习“前端免费学习笔记（深入）”；
- 确认
overflow: hidden声明在**直接控制高度的元素上**，而非其祖先 - 避免在动画元素或其父级同时使用
transform和overflow: hidden；如需硬件加速，改用backface-visibility: hidden - 富媒体内容（如
iframe、video、嵌套flex）需单独测试scrollHeight是否包含其最终渲染高度——图片未加载完时它为 0，会导致动画提前终止
真正难处理的抖动，往往藏在“内容加载完成”和“CSS 动画启动”之间那几毫秒的时序差里。不是加个 setTimeout 就能解决，得靠 offsetHeight 强制同步重排 + transitionend 精确回收，少一步都可能翻车。
