height从auto过渡到具体值时卡顿，因auto非数值无法插值；应改用max-height替代，设合理上限值并配合overflow: hidden实现平滑动画。
transition height 为什么经常卡顿
因为 height 从 auto 过渡到具体值（或反过来）时，浏览器无法计算中间帧——auto 不是数值，CSS 动画引擎直接放弃插值，导致跳变或卡住。
常见错误现象：height: auto; + transition: height 0.3s; 看起来“没动画”，实际是瞬间展开/收起；或者只在展开时动、收起时直接消失。
- 别用
height: auto做过渡起点或终点 - 避免在
display: none和block切换的同时触发height过渡（display会强制中断渲染流程） - 不要依赖 JS 读取
offsetHeight后立刻设height——重排未完成就设值，可能读到旧尺寸
用 max-height 替代 height 实现平滑过渡
max-height 是数值型属性，支持 CSS 插值；只要设一个“明显大于内容实际高度”的上限值（比如 max-height: 500px），就能让过渡生效。
使用场景：下拉菜单、折叠面板、通知提示条等高度不确定但有合理上限的元素。
立即学习“前端免费学习笔记（深入）”；
- 初始状态设
max-height: 0;+overflow: hidden; - 展开时设
max-height: 500px;（确保大于内容最大可能高度） - 收起时再切回
0，动画自然反向执行 - 注意：如果内容高度真超过 500px，收起时会被截断——所以这个值得留余量，但也不能过大（影响动画时长感知）
/* 示例 */
.collapsible {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.collapsible.open {
max-height: 500px;
}需要精确高度动画？用 transform + getBoundingClientRect
当必须按真实内容高度做逐帧动画（比如高度变化伴随其他布局挤压），transform: scaleY() 更可靠——它不触发重排，性能好，且能和 height 解耦。
做法是：先用 JS 获取元素真实高度，再用 transform: scaleY() 模拟缩放效果，同时把 height 设为固定值避免布局抖动。
- 先
getBoundingClientRect().height读出目标高度 - 设
height为目标值（防止父容器塌陷），再用transform: scaleY(0)→scaleY(1)动画 - 注意：
transform不影响文档流，若需挤压下方元素，得配合margin或padding手动模拟 - 兼容性没问题，但 Safari 对
scaleY在某些嵌套场景下可能有像素对齐问题
transition-duration 太短或太长都会暴露卡顿
不是越快越顺。低于 0.12s 人眼难识别动画过程，容易觉得“闪”；超过 0.4s 又会让用户感知延迟，尤其在快速连续操作时（比如连点折叠按钮）。
性能影响：过长的 transition 会延长主线程占用时间，如果同时触发动画的元素很多，仍可能掉帧。
- 推荐区间：展开用
0.25s，收起略快一点（0.2s），形成“轻快收起、稳重展开”的节奏感 - 别给所有过渡统一写
all 0.3s——color和height的物理意义完全不同，混用反而掩盖问题 - 加
will-change: max-height;可提前提示浏览器优化，但仅在频繁动画的组件上用，避免滥用引发内存开销
过渡卡顿最常被忽略的一点：它往往不是单一属性的问题，而是 height 动画和 display、overflow、JS 重排时机三者咬合错位的结果。调的时候别只盯着 transition 写没写对，先确认那一帧里有没有隐式重排在拖后腿。
