left/top 无效因触发重排，应改用 transform: translateX/Y 实现 GPU 加速动画；需显式声明初始 transform、避免 transition: all、注意 transform 合并与 origin 影响。
transition 为什么对 left/top 无效
直接给 left 或 top 加 transition 看似合理，但实际动画卡顿、不平滑，甚至根本不动——因为这类布局属性会触发浏览器频繁重排（reflow），性能极差。现代做法是只对「合成层友好」的属性做过渡，transform 正是其中之一。
关键判断：只要动的是位置，优先用 transform: translateX() / translateY()，而不是改 margin、left、position 偏移。
-
transform由 GPU 加速，不触发布局计算 - 必须配合
transition的属性名写全，比如transition: transform 0.3s ease，不能只写transition: all 0.3s（易误触其他属性） - 初始状态要显式声明
transform: translateX(0)，否则第一次过渡可能跳变
如何写一个可复用的平滑位移动画
核心是分离「状态」和「过渡」：用 class 控制 transform 值，transition 写在基础样式里，避免内联或 JS 动态设 style。
.box {
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform: translateX(0);
}
.box.is-shifted {
transform: translateX(120px);
}
说明：
-
cubic-bezier(0.25, 0.46, 0.45, 0.94)比默认ease更自然，适合位移；可去 easings.net 挑选 - 避免用
transition: all，否则改color或opacity也会触发位移过渡 - 如果元素本身有
transform: rotate(10deg)，新位移要合并写：transform: rotate(10deg) translateX(120px)，否则会覆盖
JavaScript 触发时的常见坑
用 JS 切换 class 后立刻读取 offsetTop 或强制重排（如 getComputedStyle），会导致浏览器跳过过渡、直接渲染终态。
- 确保 class 切换后不立即查询布局信息；需要的话，用
getComputedStyle(el).transform查当前transform值更安全 - 想监听过渡结束？用
transitionend事件，但注意它会在每个过渡属性上都触发一次，所以检查event.propertyName === 'transform' - 移动端要注意：部分安卓 WebView 对
transform+transition组合支持不稳定，加will-change: transform可提升兼容性（但别滥用，有内存开销）
transform 移动距离不准？检查 transform-origin 和嵌套影响
translateX(100px) 看似简单，但若父容器有 transform: scale(0.8)，子元素的 100px 实际像素会缩放；或者元素设置了 transform-origin: bottom right，再加 translate 会叠加偏移基准。
- 绝大多数位移动画应保持
transform-origin: 50% 50%（默认值），避免意外旋转中心干扰 - 嵌套多层
transform时，浏览器按矩阵相乘计算最终效果，调试困难；建议只在最内层动translate，外层尽量用布局控制 - 用 Chrome DevTools 的「Rendering」面板勾选「Paint Flashing」，确认动画是否真的走 GPU 合成（绿色闪动），而非软件渲染（红色）
过渡的平滑度不取决于时间长短，而在于是否绕开了重排、是否用对了合成属性。哪怕写对了 transform 和 transition，父级 overflow: hidden 或 backface-visibility: hidden 缺失，也可能让动画掉帧。这些细节往往比语法本身更决定成败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
