如何创建无需设置from的动态react-spring useTransition动画？

问题核心是useTransition没有正确跟踪每个光标元素的状态更新，导致位置变化时默认从(0,0)触发过渡。以下是修正方案：

关键修改点 #

• 绑定唯一标识：给useTransition添加keys配置，确保每个光标元素被正确识别，避免更新时被当作新元素重建。
• 明确更新过渡规则：添加update配置，告诉react-spring当光标位置变化时，从上一位置平滑过渡到新坐标。

修正后的代码 #

const transitions = useTransition(mice, {
  // 绑定光标唯一ID，确保状态跟踪准确
  keys: item => item.id,
  // 新光标进入时直接定位到目标位置（可添加opacity做淡入）
  enter: item => ({ left: item.x, top: item.y }),
  // 光标位置更新时，从上一位置过渡到新坐标
  update: item => ({ left: item.x, top: item.y }),
  // 可选：光标离开时的淡出动画
  leave: { opacity: 0, transition: { duration: 0.2 } },
  // 可选：新光标初始状态（如果需要淡入效果）
  from: { opacity: 0 }
})

return (
  <>
    {transitions((props, item) => (
      <animated.div
        className='mouseCursor'
        style={props}
      />
    ))}
  </>
)

细节说明 #

• 去掉了原代码中key={item.id}，因为useTransition的keys配置已经完成了元素标识绑定，无需重复设置。
• 如果不需要淡入淡出动画，可以删除opacity和leave相关配置，只保留位置过渡逻辑。
• 配置update后，react-spring会自动保留光标当前位置作为动画起始点，不会再从(0,0)触发过渡。

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