js 实现平移

实现元素平移的 JavaScript 方法

使用 CSS transform 属性
通过修改元素的 transform 属性实现平移，性能较好且不影响页面布局。例如水平移动 100px：

element.style.transform = 'translateX(100px)';

同时支持 translateY() 或 translate(x, y) 组合平移。

修改 position 定位属性
适用于已设置 position: absolute 或 position: relative 的元素，直接调整 left/top 值：

element.style.left = '200px';
element.style.top = '50px';

使用 requestAnimationFrame 平滑动画
实现流畅的动画效果，逐帧更新位置：

let position = 0;
function animate() {
  position += 2;
  element.style.transform = `translateX(${position}px)`;
  if (position < 100) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

通过 CSS 类名切换
预定义平移效果的 CSS 类，通过 JavaScript 切换类名：

.move-right {
  transform: translateX(100px);
  transition: transform 0.3s ease;
}

element.classList.add('move-right');

注意事项

• 使用 transform 时需注意浏览器兼容性（现代浏览器均支持）。
• 修改定位属性可能引发回流（reflow），频繁操作时建议使用 transform。
• 动画性能优化优先考虑 requestAnimationFrame 而非 setInterval。