如何让div保持恒定速度移动到目标位置，不受页面长度影响？

问题根源 #

CSS transition 是固定时长的动画，移动距离越长，速度自然越快——毕竟速度=距离/时间嘛。要让元素每秒固定移动5px，就得让动画时长跟着移动距离动态调整，或者直接用JS手动控制每帧的位移。

方案1：动态计算transition时长 #

先算出元素需要移动的总距离，再按「距离÷速度」算出对应的动画时长，给transition设置这个动态时长，配合linear缓动保证全程速度均匀。

代码示例 #

HTML：

<button id="moveBtn">点击移动方块</button>
<div id="box" style="position: absolute; bottom: 0; width: 50px; height: 50px; background: #ff4444;"></div>

JavaScript：

const moveBtn = document.getElementById('moveBtn');
const box = document.getElementById('box');
const speed = 5; // 每秒移动5px

moveBtn.addEventListener('click', () => {
  // 计算总移动距离：页面高度减去方块自身高度（避免移出页面）
  const totalDistance = window.innerHeight - box.offsetHeight;
  // 计算动画时长：总距离÷每秒移动像素数，单位为秒
  const duration = totalDistance / speed;

  // 重置方块位置（支持重复点击触发）
  box.style.bottom = '0';
  // 强制浏览器触发重绘，否则可能不启动transition动画
  void box.offsetWidth;

  // 设置过渡动画和目标位置
  box.style.transition = `bottom ${duration}s linear`;
  box.style.bottom = `${totalDistance}px`;
});

关键注意点：

• 必须使用linear缓动函数，默认的ease是先快后慢的曲线，会破坏恒定速度
• void box.offsetWidth是必要的，强制浏览器刷新样式状态，否则连续修改bottom可能不会触发过渡动画

方案2：用requestAnimationFrame逐帧控制 #

如果需要中途暂停、动态调整速度这类灵活操作，直接用JS逐帧计算位移更靠谱，每帧根据实际流逝的时间计算移动距离，精准保证速度恒定。

代码示例 #

HTML同上，JavaScript部分：

const moveBtn = document.getElementById('moveBtn');
const box = document.getElementById('box');
const speed = 5; // 每秒移动5px
let animationId = null;
let lastTime = 0;

function moveFrame(timestamp) {
  if (!lastTime) lastTime = timestamp;
  // 计算两次帧的时间差，转换为秒
  const timeGap = (timestamp - lastTime) / 1000;
  // 本次帧需要移动的距离：速度×时间差
  const moveStep = speed * timeGap;

  // 获取当前方块的bottom数值
  let currentBottom = parseFloat(getComputedStyle(box).bottom) || 0;
  // 计算最大可移动距离（到达页面顶部的位置）
  const maxBottom = window.innerHeight - box.offsetHeight;
  
  currentBottom += moveStep;
  // 到达顶部后停止动画
  if (currentBottom >= maxBottom) {
    currentBottom = maxBottom;
    cancelAnimationFrame(animationId);
    animationId = null;
  }

  box.style.bottom = `${currentBottom}px`;
  lastTime = timestamp;

  // 若动画未结束，继续请求下一帧
  if (animationId) animationId = requestAnimationFrame(moveFrame);
}

moveBtn.addEventListener('click', () => {
  // 如果已有动画在运行，先停止
  if (animationId) {
    cancelAnimationFrame(animationId);
    animationId = null;
  }
  // 重置方块位置和时间标记
  box.style.bottom = '0';
  lastTime = 0;
  // 启动动画
  animationId = requestAnimationFrame(moveFrame);
});

关键注意点：

• 基于时间差计算位移，不管页面高度如何，每秒都能精准移动5px
• 自带边界检测，避免方块超出页面顶部
• 可随时通过cancelAnimationFrame暂停或终止动画，灵活性更高

内容的提问来源于stack exchange，提问作者David AA