transform + transition 是唯一靠谱组合，因 transform 和 opacity 获 gpu 加速，而 top/left 等触发重排致卡顿；transition 必须写在静止状态且起始/结束值均有效。
直接用 transform + transition，别碰 top/left —— 后者会触发重排，动画一卡一卡的。
为什么 transform + transition 是唯一靠谱组合
浏览器对 transform 和 opacity 的变化做了 GPU 加速优化，而 top、left、width、height 这类布局属性修改会强制重排（reflow），尤其在中低端设备上肉眼可见卡顿。
-
transform: translateX(200px)是位移，不改变文档流，也不影响其他元素布局 -
transition: transform 0.3s ease-out必须写在“静止状态”样式里，不能只加在 hover 或 JS 动态设置时 - 过渡生效的前提是：起始和结束状态的
transform值都得是有效值（比如不能一边是translateX(0)，另一边是left: 200px）
transition 写法常见失效原因
写了 transition 却没动画？大概率是这几个坑：
- 没指定要过渡的属性，比如只写
transition: 0.3s（不推荐），应明确写transition: transform 0.3s - 起始状态没定义
transform，比如默认是none，但 CSS 里没显式写transform: translateX(0)，导致浏览器无法插值 - JS 中用
element.style.transform = "..."覆盖了 class 里的声明，但没清空内联样式，造成后续 transition 失效 - 元素有
display: none→ 切换为block时，transition 不触发（需先设display: block，再加过渡类，或用visibility+opacity组合）
实际移动操作怎么写才顺滑
以点击按钮让图片向右滑动 200px 为例：
.move-img {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform: translateX(0); /* 显式声明起始值 */
}
<p>.move-img.active {
transform: translateX(200px);
}
</p>
- JS 只负责切换类：
img.classList.add("active") - 不用
setTimeout控制延迟，CSS 自带transition-delay可配 - 如果要循环移动，避免用
setInterval频繁改style.transform，优先用@keyframes+animation - 移动端注意：某些老版 Safari 对
cubic-bezier支持不全，可降级为ease-out
真正难的不是写出来，而是确保每次位移都落在 GPU 渲染管线里——只要用了 top/left 或忘了声明初始 transform，平滑就立刻崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
