height: auto无法transition是因为浏览器无法将auto解析为具体像素值，故无法插值；需用max-height模拟或transform scaley等gpu加速方案替代。
为什么height: auto不能直接transition
浏览器无法在height: auto和具体数值之间生成中间帧——它不知道“auto”到底等于多少像素，于是放弃插值，直接跳变或卡顿。这不是bug，是规范限制。
常见错误写法：transition: height 0.3s ease + height: auto，尤其在JS动态展开/收起时高频出现。
- 必须用可量化、可预估的值替代
height: auto -
max-height是首选模拟方案，但上限值要合理：太小会截断内容，太大则动画时间拉长、首帧延迟明显 - 若内容高度差异极大（比如从10px到800px），
max-height设为1000px比9999px更稳妥——后者会让浏览器多算几十帧
max-height过渡怎么设才不卡
光写max-height不够，关键在初始值、目标值和缓动函数的配合。
- 初始状态必须是
max-height: 0+overflow: hidden，不能只靠display: none切换——那不是过渡，是显示/隐藏 - 目标值别写死固定像素（如
max-height: 500px），优先用max-height: fit-content（兼容性差）或预估最大可能高度 - 缓动函数强烈建议用
cubic-bezier(0.4, 0, 0.2, 1)，比ease-out更符合展开时的加速度感；收起时可换cubic-bezier(0.6, 0.04, 0.98, 0.335) - 避免同时过渡
max-height和opacity——虽然两者都走合成，但旧引擎（如IE11）对多属性transition简写解析不稳定
想真正流畅，得绕开height/max-height
只要涉及垂直方向尺寸变化，CPU layout就难完全避免。更优解是视觉模拟，而非真实改变高度。
- 用
transform: scaleY()+transform-origin: top实现“缩放式展开”，GPU加速，不触发layout - 必须配
overflow: hidden，否则内部内容会溢出 - 文字可能轻微模糊（尤其WebKit内核），适合纯色背景+图标/短文本容器，不适合长段落或精细字体
- 若需保留文字清晰度，改用
clip-path: inset(0 0 100% 0)+transition: clip-path（Chrome/Edge支持好，Safari需-webkit-clip-path）
JS动态获取高度时的坑
哪怕用了max-height，JS读取真实高度后立刻设值，也可能因同步layout导致首帧卡顿。
- 不要在
click回调里直接el.style.maxHeight = el.scrollHeight + 'px' - 正确顺序：先设
max-height: 0→offsetHeight强制重排 →requestAnimationFrame→ 再设目标值 - 移动端尤其注意：iOS Safari 15前，
scrollHeight在visibility: hidden下返回0，得临时visibility: visible再测 - 更稳方案：用
ResizeObserver监听内容变化，但兼容性需兜底（IE11无支持）
max-height却配了ease缓动，又在动画中读了offsetHeight，还忘了清空will-change——每一步单独看都合理，合起来就掉帧。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
