我之前也碰到过类似的坑！大概率是切换图片时，上一张图片的动画没彻底停掉，还在后台偷偷修改元素的坐标、缩放这些属性，新动画一启动就叠加在旧的状态上，自然就出现坐标堆叠的问题了。给你几个实用的解决思路：

• 彻底清除上一张图片的所有动画
  不管你是用CSS动画还是JS驱动的动画，切换前一定要把当前显示图片的动画完全停掉。如果是CSS动画，直接把元素的animation属性设为none，或者移除对应的动画类名；如果是用requestAnimationFrame写的JS动画，记得把之前存的动画帧ID用cancelAnimationFrame取消掉，别让旧动画在后台“偷偷干活”。

• 强制重置元素的初始状态
  清除动画后，别忘了把图片的变换属性重置到默认值，比如transform: translate(0, 0) scale(1)，透明度也设成初始需要的状态（比如1）。不然旧动画留下的坐标、缩放值会成为新动画的起点，直接导致堆叠问题。

• 控制动画的触发时机，避免重叠
  别着急在切换的瞬间就启动新动画，最好等上一张图片的退场动画完全结束后，再加载新图片并启动入场动画。可以监听CSS动画的animationend事件，或者在JS动画的结束回调里做判断，相当于加个“开关”，旧动画没跑完就不触发新的。

• 统一动画的管理逻辑
  可以写个专门的动画管理工具函数，比如stopAllAnimations(el)和startAnimation(el, type)，所有动画的启动和停止都走这两个函数。每次切换图片时，先调用stopAllAnimations处理当前显示的图片，再对新图片调用startAnimation，这样逻辑就不会乱了。

举个CSS动画场景的简单代码示例：

function switchImage(newImgElement) {
  const currentImg = document.querySelector('.active-image');
  // 1. 停止当前图片的所有动画
  currentImg.style.animation = 'none';
  // 2. 重置当前图片的变换状态
  currentImg.style.transform = 'translate(0, 0) scale(1)';
  // 3. 切换显示的图片
  currentImg.classList.remove('active-image');
  newImgElement.classList.add('active-image');
  // 4. 给新图片启动动画（这里的动画名根据你的需求动态获取）
  newImgElement.style.animation = `${getRandomAnimation()} 0.6s ease forwards, ${getLoopAnimation()} 2s infinite`;
}

如果是JS驱动的动画，记得管理好动画帧ID：

let activeAnimationId = null;

function stopCurrentAnimation() {
  if (activeAnimationId) {
    cancelAnimationFrame(activeAnimationId);
    activeAnimationId = null;
  }
}

function startZoomInAnimation(imgEl) {
  stopCurrentAnimation(); // 先停掉之前的动画
  let currentScale = 0.7;
  function animate() {
    currentScale += 0.015;
    imgEl.style.transform = `scale(${currentScale})`;
    if (currentScale < 1) {
      activeAnimationId = requestAnimationFrame(animate);
    } else {
      // 启动循环动画
      startLoopAnimation(imgEl);
    }
  }
  animate();
}

按照这个思路调整你的代码，应该就能解决动画坐标堆叠的问题了。

备注：内容来源于stack exchange，提问作者User