使用CSS transform和transition可实现元素平滑移动，通过添加类名触发动画；也可用@keyframes定义自动播放的动画；JavaScript动态设置transform则适用于运行时计算位置，三者均不触发重排，性能优异。
让一个元素平滑移动到目标位置，可以通过CSS的 transform 和 transition 属性实现。这种方式性能好、动画流畅，是现代前端开发中的推荐做法。
使用 transition + transform 实现平滑移动
给元素添加 transition 属性，配合 transform: translate() 来触发动画。
示例：
HTML:
<div class="box"></div>
CSS:
.box {
width: 50px;
height: 50px;
background: blue;
transition: transform 0.5s ease;
}
.box.move {
transform: translate(100px, 50px);
}
当给这个 div 添加 move 类时，它会以平滑动画方式移动到相对原位置 x轴100px、y轴50px 的地方。
使用 @keyframes 实现预设动画
如果希望动画自动播放或更复杂控制，可以用 @keyframes 定义关键帧动画。
立即学习“前端免费学习笔记（深入）”；
示例：
@keyframes slideTo {
to {
transform: translate(100px, 50px);
}
}
.box {
width: 50px;
height: 50px;
background: green;
animation: slideTo 0.6s ease forwards;
}
这个元素会在页面加载后自动平滑移动到目标位置，forwards 确保动画结束后保持最终状态。
JavaScript 控制动态位置
若目标位置由用户交互或计算得出，可用 JavaScript 动态设置 transform。
示例：
const box = document.querySelector('.box');
box.style.transition = 'transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)';
box.style.transform = 'translate(200px, 100px)';
这样可以在运行时灵活控制移动目标，同时保持动画平滑。
基本上就这些。用 transform 移动元素不会触发重排，只涉及合成层操作，性能更好。搭配 transition 或 animation，轻松实现自然流畅的移动效果。
