17370845950

要实现元素在 left 和 top 属性上产生平滑的过渡效果（transition），关键在于正确设置 CSS 的 position 属性，并启用 transition 动画。虽然 left 和 top 本身可以被过渡，但需要满足一些前提条件。

1. 元素必须是定位元素

只有设置了定位（relative、absolute 或 fixed）的元素，left 和 top 才会生效。普通静态布局（static）下修改这两个值不会产生视觉变化。

.box {
  position: relative;
  left: 0;
  top: 0;
  transition: left 0.3s ease, top 0.3s ease;
}
.box:hover {
left: 20px;
top: 10px;
}

2. 启用 transition 过渡效果

为 left 和 top 单独或一起添加 transition，定义动画时长和缓动函数。推荐同时过渡多个属性以保持同步。

• transition: left 0.3s ease; —— 只过渡 left
• transition: all 0.3s linear; —— 过渡所有可动画属性（不推荐用于性能敏感场景）
• transition: left 0.3s, top 0.3s; —— 明确指定，更清晰

3. 触发位置变化的方式

可以通过以下方式触发 left / top 的改变，从而激活 transition：

• 伪类：如 :hover、:focus、:active
• JavaScript 动态添加 class
• CSS @keyframes 配合 animation（非 transition）

document.querySelector('.box').classList.add('moved');
/ CSS /
.moved {
left: 50px;
top: 30px;
}

4. 更优替代方案：使用 transform 平移

虽然 left/top 能实现过渡，但浏览器渲染性能不如 transform。建议优先使用 transform: translate(x, y) 实现位移动画。

.box {
  position: relative;
  transform: translate(0, 0);
  transition: transform 0.3s ease;
}
.box:hover {
transform: translate(20px, 10px);
}

优点：GPU 加速、更流畅、无重排（reflow）。

基本上就这些。如果坚持用 left/top，确保元素已定位并正确设置 transition。但从现代前端实践看，transform 是更高效的选择。