max-height过渡不生效的根本原因是浏览器无法对auto值做动画，必须用具体数值并配合overflow、强制重排及兼容处理。
点击列表项时max-height过渡不生效？检查初始值和目标值
直接设 max-height: 0 → max-height: 200px 看似合理，但多数情况下动画会“啪”一下跳出来。根本原因是：浏览器无法对 max-height: auto 做过渡，而你几乎不可能提前知道内容真实高度；设固定值又难适配不同内容长度。
- 必须用具体数值（如
px、em），不能用auto或fit-content作为过渡终点 - 如果列表项高度差异大，建议按最大可能行数估算，比如
max-height: 12em（约6行文本）比硬写300px更健壮 - 初始状态要加
overflow: hidden，否则即使max-height: 0，内容仍可能溢出显示
用JavaScript触发transition前必须强制重排
JS里先改class再设 max-height，浏览器常会合并渲染，跳过过渡。关键在于让浏览器“意识到布局已变”，得手动触发一次重排（reflow）。
- 常见错误写法：
el.classList.add('open');<br>el.style.maxHeight = '200px';——这基本没动画 - 正确做法：在设新
max-height前读一次布局属性，例如el.offsetHeight：el.classList.add('open');<br>el.offsetHeight; // 强制重排<br>el.style.maxHeight = '200px'; - 不用 jQuery 的
.height()或.outerHeight()替代，它们不一定触发重排；原生offsetHeight/clientHeight最可靠
transition只写max-height不够，记得加overflow
只写 transition: max-height 0.3s ease，动画过程中若内容撑出容器，会看到突然裁切或滚动条闪现。这是因为 overflow 默认是 visible，它不参与过渡，切换瞬间就生效了。
- 必须把
overflow和max-height放在同一个transition声明里：transition: max-height 0.3s ease, overflow 0.3s ease;
- 初始状态设
overflow: hidden，展开后也保持overflow: hidden（除非你真需要滚动），避免内容“弹出来” - 别依赖
overflow: hidden隐藏内容——它只是视觉遮盖，屏幕阅读器仍可读；需配合aria-expanded和aria-hidden控制可访问性
移动端Safari对max-height过渡有兼容问题
iOS 15.4 之前，Safari 对 max-height 过渡支持不稳定：有时首屏加载后第一次点击无动画，或动画卡顿。这不是代码写错，是渲染引擎限制。
- 临时绕过方案：用
transform: scaleY(0)→scaleY(1)替代，但需额外处理子元素文字模糊（加transform: translateZ(0)或backface-visibility: hidden） - 更稳妥的降级：检测
navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')，对 iOS Safari 直接用 JS 控制display: none/block，放弃动画 - 别用
will-change: max-height强制硬件加速——它在 Safari 上反而更容易导致白屏或闪烁
max-height 动画，转而用更可控的 transform 或纯 JS 控制。尤其当列表项里有图片、iframe 或动态加载内容时，高度预测基本失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
