js实现移动
使用 CSS transform 和 transition 实现平滑移动
通过修改元素的 transform 属性实现移动，结合 transition 添加动画效果。
const element = document.getElementById('target');
element.style.transition = 'transform 0.3s ease'; // 设置动画效果
element.style.transform = 'translateX(100px)'; // 向右移动 100px通过修改 left/top 实现绝对定位移动
需确保目标元素为 position: absolute 或 position: relative。
const element = document.getElementById('target');
element.style.position = 'absolute';
element.style.left = '200px'; // 水平移动
element.style.top = '50px'; // 垂直移动使用 requestAnimationFrame 实现高性能动画
适合复杂动画场景，逐帧控制移动过程。
let position = 0;
function move() {
const element = document.getElementById('target');
position += 2;
element.style.transform = `translateX(${position}px)`;
if (position < 300) requestAnimationFrame(move);
}
requestAnimationFrame(move);监听事件触发移动（如拖拽）
结合 mousedown、mousemove 和 mouseup 实现拖拽效果。
const element = document.getElementById('target');
let isDragging = false;
element.addEventListener('mousedown', () => {
isDragging = true;
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
element.style.left = `${e.clientX}px`;
element.style.top = `${e.clientY}px`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
});使用 CSS 动画（@keyframes）
通过 JavaScript 动态添加 CSS 动画类。
const element = document.getElementById('target');
element.classList.add('move-animation');
// CSS 部分需提前定义
/*
.move-animation {
animation: move 2s forwards;
}
@keyframes move {
to { transform: translateX(100px); }
}
*/注意事项
- 优先使用
transform而非直接修改left/top，避免触发重排（Reflow）。 - 移动元素需确保其定位方式（
absolute、relative或fixed）。 - 复杂动画建议使用 GSAP 等专业动画库优化性能。
