max-height过渡不生效的根本原因是无法在0与auto间插值，必须用两个确定像素值（如0→300px），并始终配合overflow:hidden；js动态方案需在dom就绪后读取scrollheight并设内联样式。
max-height过渡为啥不生效
根本原因是 max-height 从 0 到 auto 无法插值——浏览器不知道 auto 对应多少像素，直接跳变。哪怕写了 transition: max-height 0.3s，动画也卡顿、跳帧甚至完全没反应。
必须用两个确定的像素值：比如 max-height: 0 → max-height: 500px。这个“500px”不是随便写的，它得大于目标内容真实高度（含 padding、line-height 等），但又不能过大（如 10000px），否则浏览器要计算大量中间帧，拖慢动画节奏。
-
overflow: hidden必须始终存在，否则内容会溢出破坏视觉效果 - 别用
transition: all—— 它会连border、color一起动，浪费性能且干扰主逻辑 - 初始状态必须是
max-height: 0+overflow: hidden，否则 transition 不触发
如何设一个“够大但不过头”的max-height值
预估比测量更常用，也更轻量。比如菜单最多 6 项，每项行高 24px，上下 padding 各 8px，那单行高约 40px，6 行就是 240px，再加一点余量（如标题、分隔线），设 max-height: 300px 就很稳妥。
响应式场景下，max-height: 100vh 或 max-height: calc(100vh - 120px) 更安全，但注意 Safari 中 vh 会随地址栏显隐波动，真机测试时可能突然变矮——此时回退到固定像素值（如 1000px）反而更稳。
- 移动端若父容器用了
transform: translateZ(0)，Safari 可能返回错误的scrollHeight，导致 JS 动态方案失效 - 不要设
max-height: none—— 它不可动画，且会立刻撑开布局 - 动画时间建议控制在
0.25s–0.35s；超过0.4s，人眼明显感知延迟
JS 动态读取 scrollHeight 的实操要点
当内容高度完全不可预测（比如异步加载文本、用户可编辑区域），纯 CSS 预估就容易翻车。这时必须靠 JS 在展开前读取真实高度并写入内联样式：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
展开时：element.style.maxHeight = element.scrollHeight + 'px'
收起时：先设 element.style.maxHeight = '0'，等 transitionend 触发后再清空内联样式（或设 maxHeight = ''），否则下次展开会因残留样式失效。
- 别在
transitionend里设max-height: auto—— 这会破坏后续展开逻辑 - 展开前若内容还没渲染完（如 React useEffect 未 commit），
scrollHeight可能为 0；需确保 DOM 已挂载且内容已插入 - 如果用了
will-change: transform或硬件加速，先临时移除，测完再加回
opacity 和 max-height 要不要一起过渡
一起过渡能增强视觉连贯性，尤其对多行文本或带背景色的区域。但要注意：两者 duration 必须一致，否则会出现“内容先露出来、再淡入”或相反的错位感。
推荐写法：transition: max-height 0.3s ease-out, opacity 0.3s ease-out。只过渡这两个属性，避免副作用。
-
opacity: 0时仍占文档流位置，所以必须配合max-height: 0+overflow: hidden才能真正“收起来” - 无障碍要考虑：收起状态应设
aria-hidden="true"，展开后同步更新 - 系统偏好
prefers-reduced-motion下应禁用 transition，直接切换类名
实际最麻烦的从来不是写几行 CSS，而是 scrollHeight 在不同渲染时机下返回的值不一致，还有 Safari 对 layout 触发时机的特殊处理——这些没法靠查文档解决，得真正在真机上点开、收起、反复刷新才看得见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
