transform + transition 更流畅，因仅触发合成层，不触发重排重绘；而直接改 left/top 会强制 Layout→Paint→Composite。
为什么 transform + transition 比直接改 left/top 更流畅
浏览器对 transform 的动画能走合成层（compositor layer），不触发重排（reflow）和大部分重绘（repaint），而直接修改 left、top 或 width 会强制触发 Layout → Paint → Composite 流程，尤其在中低端设备上卡顿明显。
关键点在于：只有 transform 和 opacity 这两个属性的过渡能被 GPU 加速（前提是没被其他 CSS 阻断，比如 will-change: auto 或父元素有 overflow: hidden 且裁剪了 transform 区域）。
transition 必须写在 transform 变化的元素上，且不能省略单位
transition 要作用于目标元素本身，且必须明确指定要过渡的属性名 —— 写 transition: all 0.3s 看似省事，但会把所有变化属性都纳入过渡，包括你没打算动的 color 或 background，反而增加渲染负担。
- ✅ 推荐：
transition: transform 0.3s ease, opacity 0.3s ease - ❌ 错误：
transition: 0.3s（无效，缺少属性名和时间单位） - ❌ 危险：
transition: all 0.3s（可能意外过渡非视觉属性，或干扰 JS 动态 class 切换） - ⚠️ 注意：
transform: translateX(50px)和transform: translateX(50)效果不同 —— 后者是非法值，会被浏览器忽略，导致过渡失效
避免 layout 触发导致 transition 中断
即使用了 transform，如果 JS 在过渡过程中读取了 offsetLeft、getBoundingClientRect() 或任何触发同步 Layout 的 API，浏览器会立刻 flush style → layout → paint，打断当前 transition 流程，造成“闪一下再动”或直接跳变。
立即学习“前端免费学习笔记（深入）”；
- JS 中读取布局信息尽量批量做，或放在
requestAnimationFrame开头 - 避免在
:hover或 class 切换后立刻调用element.offsetWidth - 调试时可打开 Chrome DevTools → Rendering → “Paint flashing” 和 “Layout Shift Regions”，观察是否意外触发 layout
/* 示例：安全地在 transition 后执行回调 */
.element {
transform: translateX(0);
transition: transform 0.3s ease;
}
.element.active {
transform: translateX(100px);
}
/* JS 中不要这样写 */
el.classList.add('active');
console.log(el.offsetWidth); // ⚠️ 强制 layout，可能打断 transition
/* 应该这样 */
el.classList.add('active');
requestAnimationFrame(() => {
// 此时 layout 已完成，不会打断动画帧
});
移动端需额外注意 will-change 和 backface-visibility
某些 Android WebView 或旧版 Safari 对 transform 过渡支持不稳定，尤其涉及 3D 变换时。加 will-change: transform 可提前提示浏览器提升图层，但滥用会导致内存占用上升；加 backface-visibility: hidden 能绕过部分渲染 bug，但会禁用背面内容（比如翻转卡片）。
- 仅对频繁动画的元素加
will-change: transform，且动画结束及时移除（可用transitionend事件） - 若出现闪烁、锯齿或动画中途卡住，尝试加
transform: translateZ(0)或backface-visibility: hidden - 注意：
transform: scale(1.0001)这类“伪提升”在新版 Chrome 已基本失效，别依赖它
过渡真正顺滑的关键不在写多少行 CSS，而在理解哪些操作会把浏览器拖回主线程做 layout —— 大多数卡顿，其实发生在你没意识到的地方。
