使用Framer Motion AnimatePresence实现流畅组件进出动画的异常求助

你把每个组件都放在独立的<AnimatePresence>标签里，这会导致切换时旧组件所在的<AnimatePresence>直接卸载组件，无法触发exit动画；同时多个<AnimatePresence>之间无法协调进出动画的时序，只有第一个组件的delay能生效。

1. 将所有需要切换的组件包裹在**同一个<AnimatePresence>**中，让它统一管理组件的进出动画
2. 给每个<motion.div>添加唯一的key属性，让Framer Motion能区分不同组件
3. 用AnimatePresence的mode="wait"属性，等待前一个组件的退出动画完成后再播放新组件的进入动画，保证时序匹配

修改后的代码示例：

<AnimatePresence mode="wait">
  {isAboutVisible && (
    <motion.div
      key="about"
      initial={{ x: 1050, opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      exit={{ x: 1050, opacity: 0 }}
      transition={{ duration: 1.5 }}
    >
      <About />
    </motion.div>
  )}
  {isSkillsVisible && (
    <motion.div
      key="skills"
      initial={{ x: 1050, opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      exit={{ x: 1050, opacity: 0 }}
      transition={{ duration: 1.5 }}
    >
      <Skills />
    </motion.div>
  )}
  {isProjectsVisible && (
    <motion.div
      key="projects"
      initial={{ x: 1050, opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      exit={{ x: 1050, opacity: 0 }}
      transition={{ duration: 1.5 }}
    >
      <Projects />
    </motion.div>
  )}
</AnimatePresence>

• mode="wait"会避免新旧组件动画重叠，保证流畅的切换效果
• 如果需要自定义延迟，可以在transition里给exit和animate分别设置参数，比如：

  transition={{
    duration: 1.5,
    exit: { delay: 0 },
    animate: { delay: 0.5 }
  }}
  

• 确保isAboutVisible、isSkillsVisible、isProjectsVisible三个状态互斥，同一时间只有一个为true，避免多个组件同时渲染

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