如何解决跟随鼠标的图片初始从左上角跳至鼠标位置的问题？

问题：实现了图片跟随鼠标的功能，但页面刷新或首次移动鼠标时，图片会先显示在左上角，随后跳至鼠标位置，需要消除这个过程，让图片直接从鼠标下方显示。

问题原因 #

当前代码里，元素初始定位在left:0, top:0，首次触发mousemove时，是从这个初始位置通过动画过渡到鼠标位置，同时设置opacity:1，所以会出现先显示左上角再跳转的视觉断层。

解决方法 #

给首次鼠标移动加个标记，第一次触发时直接把元素定位到鼠标位置（不用动画），之后再执行平滑跟随的动画，彻底跳过从左上角出发的过程。

以下是修改后的完整代码：

HTML

<div id="mouse_trail">
  <img src="https://picsum.photos/200/300" />
</div>

CSS

#mouse_trail {
  height: 20px;
  width: 20px;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity 500ms ease;
}

#mouse_trail img {
  position: absolute;
  height: 80px;
  width: 80px;
  animation: rotate 2.5s infinite linear;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

JavaScript

const mouse_trail = document.getElementById('mouse_trail');
let isFirstMove = true; // 标记是否为首次鼠标移动

window.onmousemove = e => {
  const x = e.clientX - mouse_trail.offsetWidth / 2,
        y = e.clientY - mouse_trail.offsetHeight / 2;

  if (isFirstMove) {
    // 首次移动：直接定位到鼠标位置，无动画
    mouse_trail.style.transform = `translate(${x}px, ${y}px)`;
    mouse_trail.style.opacity = 1;
    isFirstMove = false;
    return;
  }

  // 非首次移动：执行平滑跟随动画
  const keyframes = {
    transform: `translate(${x}px, ${y}px)`
  }

  mouse_trail.animate(keyframes, {
    duration: 800,
    fill: 'forwards'
  });
}

可选优化 #

如果希望页面加载后，即使鼠标没动，元素也能定位到当前鼠标位置（比如鼠标已经在页面内），可以在页面加载时主动触发一次鼠标移动事件：

window.addEventListener('load', () => {
  const defaultEvent = new MouseEvent('mousemove', {
    clientX: window.innerWidth / 2,
    clientY: window.innerHeight / 2
  });
  window.dispatchEvent(defaultEvent);
});

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