应优先使用 transform: translate() 实现位移过渡，因其是合成属性，支持硬件加速且无需 position 声明；left/top 过渡需显式 position 及明确初始值，但易触发重排、卡顿，仅限特定场景谨慎使用。
直接设置 left 或 top 的 transition 通常无效
因为 left 和 top 属于“非合成属性”，浏览器在大多数情况下无法对其做 GPU 加速，且触发 layout → paint → composite 全流程，过渡容易卡顿甚至不生效（尤其在元素未设置 position: relative/absolute/fixed 时）。更关键的是：如果元素原本没定义 left 或 top，从 auto 到具体数值，transition 根本不启动。
改用 transform: translate() 是最可靠方案
transform 是可被浏览器优化的合成属性，支持硬件加速，且从 translate(0, 0) 到任意偏移都能平滑过渡。只需确保元素有 transition: transform 0.3s ease，再通过 class 切换或 JS 修改 transform 值即可。
- 避免写
left: 100px; top: 50px;配transition: left 0.3s, top 0.3s; - 统一用
transform: translate(X, Y);，X/Y 可为px、rem、%（注意：% 是相对于自身尺寸，不是父容器） - 若需响应式位移，优先用
translateX()/translateY()单独控制，减少重排风险
.box {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.box.shifted {
transform: translate(120px, -30px);
}
必须显式声明 position 才能用 left/top 过渡（仅限特定场景）
只有当元素已设 position: relative/absolute/fixed，且初始状态明确定义了 left 和 top（不能是 auto），transition 才可能起作用。但即便如此，仍不如 transform 稳定。
- 错误写法：
div { left: 100px; }—— 没position，left被忽略，过渡失效 - 勉强可用但不推荐：
div { position: relative; left: 0; transition: left 0.3s; } .moved { left: 100px; } - 若必须用
left/top（如配合 JS 动态计算布局），记得加will-change: left, top;提示浏览器优化（但别滥用，会增加内存开销）
JS 控制位移时，避免反复读写 offsetLeft 触发强制同步布局
如果用 JS 改 style.left 实现动画，又在循环中读取 offsetLeft 或 getBoundingClientRect()，会强制浏览器立即计算 layout，打断过渡连贯性。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
transform+requestAnimationFrame或 CSS class 切换 - 需要精确位置反馈时，把读取操作放在
transitionend事件后，或用getComputedStyle(el).transform解析矩阵（注意兼容性） - 调试时留意 DevTools 的“Rendering”面板 → 勾选 “Paint flashing”，看是否频繁重绘
transform 是默认解法；硬要用 left/top，就得全程守住 position + 明确初始值 + 接受潜在卡顿。 
