Framer-motion动画出现重复实例故障排查求助

我在开发个人网站时参考Aceternity的翻转文字组件实现效果，容器居中时出现跳动问题，于是写了带详细注释的代码。目前遇到的核心问题是：动画每1-7次循环会随机出现单帧双实例的故障，这个glitch仅持续一帧，暂时没定位到原因。

环境与信息 #

• 问题文件：./src/app/ui/title-section/vanishing-words.tsx
• 测试浏览器：Chrome、Safari

已做的推测与验证 #

• 嵌套motion组件可能互相影响：已验证onExitComplete未多次触发，排除此直接原因
• 取消注释代码块b1会加重故障：该代码块为内层motion.div添加了完整的入场/退出动画
• 故障在Chrome和Safari均存在：排除浏览器特定渲染问题

精简后的问题代码 #

<AnimatePresence
  onExitComplete={() => {
    // 5. The animation loops
    setIsAnimating(false);
  }}
>
  <motion.div
    key={`${currentWord}-${xOffSet}`}
    style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}
    ref={divRef}
    transition={{ duration: 1 }}
    initial={{ x: xOffSet }}
    animate={{ x: 0 }}
  >
    <p>{relativeClause}</p>

    <motion.div
      key={currentWord}
    >
    {/* b1: Swapping out the div above with the one below seems to make it worse */}
    {/* <motion.div
      key={currentWord}
      initial={{
        opacity: 0,
        y: 10,
      }}
      animate={{
        opacity: 1,
        y: 0,
      }}
      transition={{
        duration: 0.4,
        ease: "easeInOut",
        type: "spring",
        stiffness: 100,
        damping: 10,
      }}
      exit={{
        opacity: 0,
        y: -40,
        x: 40,
        filter: "blur(8px)",
        scale: 2,
        position: "absolute",
      }}
    > */}
      
      {currentWord.split("").map((letter, index) => (
        <motion.span
          key={currentWord + index}
          initial={{
            opacity: 0,
            y: 10,
            filter: "blur(8px)",
          }}
          animate={{
            opacity: 1,
            y: 0,
            filter: "blur(0px)",
          }}
          transition={{
            delay: index * 0.08,
            duration: 0.3,
          }}
          className={clsx("inline-block", letter === " " && "w-1")}
        >
          {letter}
        </motion.span>
      ))}
    </motion.div>
  </motion.div>
</AnimatePresence>

可能的排查方向 #

• 检查Key的唯一性：外层motion.div的key由currentWord和xOffSet拼接而成，需确保每次循环时这个key完全唯一，避免React因key复用导致新旧组件短暂共存
• 动画时序对齐：外层div动画时长为1s，内部字母动画的延迟累加后可能和退出动画的时序重叠，导致新组件入场时旧组件未完全退出
• AnimatePresence触发时机：确认setIsAnimating(false)是否严格在退出动画完成后执行，避免提前触发下一轮循环导致组件重叠
• 定位属性影响：b1代码块的exit动画中添加了position: absolute，可能导致退出组件脱离文档流后未及时被DOM移除，与新组件短暂重叠

内容的提问来源于stack exchange，提问作者Ben Lewis-Jones