max-height过渡失效的根本原因是浏览器无法对auto或none等非数值属性做插值动画；必须用具体像素值，且需JS动态读取scrollHeight并配合强制重排才能实现平滑过渡。
为什么直接用 max-height 做过渡会失效
因为 max-height 从 0 过渡到具体像素值时，如果目标高度是动态计算的（比如内容撑开的实际行高 × 行数），而你写死一个固定值（如 max-height: 200px），动画会卡顿或跳变；更常见的是设成 max-height: 0 → max-height: none，但 none 无法参与 CSS 过渡，浏览器直接跳到最终态。
根本原因是：CSS 只对可计算、可插值的数值型属性做平滑过渡，none 不是数值，auto 也不是。
- 错误写法：
max-height: 0; transition: max-height 0.3s;→ 展开时设max-height: none，动画不触发 - 可行思路：用 JS 获取真实滚动高度（
scrollHeight），再把它设为max-height的目标值 - 注意：不要用
offsetHeight或clientHeight，它们不含溢出部分，无法反映完整内容高度
如何用 JS 动态设置 max-height 并触发过渡
关键在「先强制关闭过渡 → 设置新 max-height → 再开启过渡并更新值」，否则浏览器可能合并重排，跳过动画。
- 收起时：先设
max-height为当前实际高度（用getComputedStyle读取），再设为0，并加overflow: hidden - 展开时：先设
max-height: 0和overflow: hidden，offsetHeight强制重排，再设max-height为scrollHeight值 - 推荐加
will-change: max-height提升动画层，尤其在长列表中能减少闪烁 - 示例逻辑片段：
function toggleExpand(el) {
const isExpanded = el.classList.contains('expanded');
if (isExpanded) {
el.style.maxHeight = el.scrollHeight + 'px';
el.offsetHeight; // 强制重排
el.style.maxHeight = '0';
} else {
el.style.maxHeight = '0';
el.offsetHeight;
el.style.maxHeight = el.scrollHeight + 'px';
}
el.classList.toggle('expanded');
}
max-height 过渡和 height 过渡的区别在哪
height 看起来更直观，但实际问题更多：它受盒模型影响大（padding/border 会干扰计算），且当内容字体大小响应式变化时，height 容易失准；而 max-height 只限制上限，不影响内部布局流，容错性更好。
立即学习“前端免费学习笔记（深入）”；
-
height必须精确匹配内容高度，否则会留白或裁切；max-height允许“略高一点”，只要大于等于真实高度即可 -
max-height在 flex / grid 容器中更稳定，height可能被父容器min-height或align-items干扰 - 性能上两者差异不大，但
max-height更少触发 layout，尤其在频繁切换时 - 别忘了加
overflow: hidden，否则超出部分仍可见，失去“收起”意义
移动端 Safari 下的兼容性坑点
iOS 15+ 以前的 Safari 对 max-height 过渡支持不稳定，尤其在 display: flex 子元素里，可能出现动画卡住或直接跳变。
- 临时解法：给过渡元素加
-webkit-transform: translateZ(0)，强制 GPU 加速 - 避免在
position: absolute或transform父容器内做该动画，Safari 的层合成逻辑容易出错 - 如果内容含图片，确保图片加载完成后再计算
scrollHeight，否则高度偏小 —— 可监听img.onload或用document.fonts.ready - 真机调试时，打开 Web Inspector → Elements → Styles 面板，手动修改
max-height值，确认是否能平滑过渡，排除 CSS 优先级覆盖问题
scrollHeight 值——它依赖渲染完成、字体就绪、图片加载完毕，任何一个环节没等稳，高度就算错。 
