优先使用 transform、opacity、filter 等不触发重排的属性实现过渡动画；避免使用 width、height、top、left、margin、padding 等引发重排的布局属性。
transition 作用在 layout 属性上会触发重排
会。只要 transition 应用在影响文档流的 CSS 属性上（比如 width、height、top、left、margin、padding），浏览器就必须在每一帧重新计算布局（reflow），导致性能下降，尤其在中低端设备上容易卡顿。
这不是 transition 本身的问题，而是这些属性的变更天然需要重排 —— 浏览器得重新确定元素尺寸、位置、周围元素如何响应等。
哪些属性过渡不会触发重排
只影响绘制层（paint）或合成层（composite）的属性，过渡时只需 GPU 合成，不涉及布局计算。推荐优先使用：
-
transform（如translateX()、scale()、rotate()）—— 最安全，强制提升为独立图层 -
opacity—— 仅影响透明度，纯合成操作 -
filter（部分值，如blur()、grayscale()）—— 现代浏览器大多走合成，但复杂滤镜可能回退到 CPU 绘制
注意：transform: translateZ(0) 或 will-change: transform 可主动提示浏览器升层，但别滥用 —— 过多图层反而增加内存和合成开销。
立即学习“前端免费学习笔记（深入）”；
用 transform 替代 top/left 的实操写法
常见错误是用 top + transition 做位移动画；正确做法是改用 transform: translateY()。
.box {
position: relative;
transition: transform 0.3s ease;
}
.box:hover {
transform: translateY(-10px);
}对比错误写法：
.box-bad {
position: relative;
transition: top 0.3s ease;
}
.box-bad:hover {
top: -10px; /* 触发重排 */
}关键差异：
-
top改变的是元素在文档流中的“定位偏移”，影响后续元素位置判断 -
transform是视觉层面的移动，元素原始占位不变，不干扰其他元素布局
margin/padding 动画的替代方案
直接过渡 margin 或 padding 必然重排。可行替代路径：
- 用
transform: scale()模拟缩放感（适用于容器整体缩放） - 用
max-height+overflow: hidden实现展开收起（需预设合理max-height值） - 对内边距变化敏感的场景，可考虑用
clip-path动画裁剪区域（兼容性需查 caniuse）
例如折叠菜单：
.menu {
overflow: hidden;
max-height: 0;
transition: max-height 0.25s ease-out;
}
.menu.open {
max-height: 200px; /* 需略大于内容实际高度，否则可能截断 */
}过渡是否影响布局，取决于你动的是哪个属性。真正要避开的不是 transition，而是那些悄悄拉上重排的“布局属性”。动手前先问一句：这个变化，会让浏览器重新算一遍所有元素的位置吗？
