如何实现鼠标移动触发的DIV元素平滑延迟位移动画？

为什么用transition-transform会卡顿？ #

Svelte的transition系列API是为元素进入/离开DOM或单次状态切换设计的。鼠标移动时，元素位置会每秒更新几十次，每次更新都会触发一次transition动画，浏览器来不及处理连续的动画触发请求，就会出现卡顿——因为CSS transition的动画队列会被频繁中断、重置，无法形成连续平滑的过渡。

能不能用transition实现？ #

不建议。transition的设计场景不匹配实时连续的状态变化，强行使用只会导致性能问题，没有优化空间。

推荐方案：用Svelte的spring运动 store #

Svelte的motion模块提供的spring是专门处理连续状态平滑过渡的工具，它模拟物理弹簧的运动特性，能轻松实现你要的「平滑略带延迟」的跟随效果，性能远优于transition。

伪代码示例（SvelteKit + TailwindCSS） #

<script>
  import { spring } from 'svelte/motion';
  import { onMount } from 'svelte';

  // 初始化spring存储，配置参数控制延迟和平滑度
  // stiffness越小，元素跟随越慢（延迟越高）；damping越大，停止越快（摆动越少）
  const elementOffset = spring({ x: 0, y: 0 }, {
    stiffness: 0.1,
    damping: 0.2,
    precision: 0.1
  });

  let containerRef; // 绑定容器元素，用于计算鼠标相对位置

  // 处理鼠标移动事件，计算目标偏移量
  function handleMouseMove(e) {
    if (!containerRef) return;
    const rect = containerRef.getBoundingClientRect();
    // 计算鼠标相对于容器中心的偏移，乘以系数控制位移幅度
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    const targetX = (e.clientX - rect.left - centerX) * 0.05;
    const targetY = (e.clientY - rect.top - centerY) * 0.05;
    
    // 更新spring的目标值，自动触发平滑过渡
    elementOffset.set({ x: targetX, y: targetY });
  }

  // 绑定/解绑鼠标事件
  onMount(() => {
    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  });
</script>

<!-- 页面容器 -->
<div bind:this={containerRef} class="w-full h-screen flex items-center justify-center">
  <!-- 要产生位移的元素 -->
  <div 
    class="w-64 h-64 bg-gray-800 rounded-lg shadow-xl will-change-transform"
    style:transform="translate({$elementOffset.x}px, {$elementOffset.y}px)"
  >
    <!-- 元素内容 -->
  </div>
</div>

优化细节 #

1. 节流鼠标事件：减少频繁触发的计算压力，比如添加简单节流逻辑：

let lastTriggerTime = 0;
function handleMouseMove(e) {
  const now = Date.now();
  if (now - lastTriggerTime < 16) return; // 限制为60fps触发频率
  lastTriggerTime = now;
  // 原有逻辑...
}

2. 添加will-change: transform：告诉浏览器提前优化元素的transform属性，提升动画流畅度（已在示例的class中添加）。
3. 调整spring参数：根据需求修改stiffness和damping的值，找到最贴合的延迟和平滑度。

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