Framer Motion中AnimatePresence组件在路由切换时无法触发退出动画的问题求助

我看了你代码里的问题啦，其实主要是两个小细节没处理好，调整一下就能让退出动画正常跑起来：

1. 移除单个页面组件内的多余AnimatePresence #

你的Home组件里额外套了一层AnimatePresence，这完全没必要哦。AnimatePresence只需要在包裹路由切换的父组件（也就是你的App.js里）用一次就够了，单个页面组件里加它反而会阻止父级的AnimatePresence捕捉到组件的退出事件。

把Home组件里的AnimatePresence去掉，修改后的Home组件代码应该是这样：

import React, { useContext } from 'react';
import { pageInfo } from './App';
import './style.css'
import { motion } from 'framer-motion';

const variantss = {
  hidden: { opacity: 0, x: '-100vw' },
  visible: { opacity: 1, x: 0, transition: { type: 'spring', } },
  exit: { x: '-100vw', transition: { ease: 'easeInOut' } }
}

export default function Home() {
  return (
    <motion.div className="home" variants={variantss} initial='hidden' animate='visible' exit='exit' >
      <h1>Hello this is the home page title</h1>
      <p>Hello the is the home page content</p>
    </motion.div>
  );
}

2. 确认AnimatePresence的核心配置 #

你的App.js里已经做对了两个关键设置：

• 给Routes组件传递了location属性，并且设置了key={location.pathname}，这样每次路由切换时，React会识别到组件变化，触发AnimatePresence的退出/进入逻辑
• 开启了exitBeforeEnter，确保退出动画完全完成后，再加载新页面的进入动画

如果想让退出动画更可控，还可以给exit变体的transition增加时长参数，让动画节奏更清晰：

exit: { x: '-100vw', transition: { ease: 'easeInOut', duration: 0.5 } }

3. 确保路由切换用Link组件触发 #

要保证你是用React Router的Link组件来切换路由，而不是直接修改location或者其他方式，因为Link会让React Router正确触发location变化，进而让AnimatePresence准确感知到组件的卸载动作。比如可以在页面里加个简单导航测试：

// 在Home组件里添加示例导航
<nav style={{ margin: '20px 0' }}>
  <Link to="/signup" style={{ marginRight: '10px' }}>去注册页</Link>
  <Link to="/shop">去商店页</Link>
</nav>

做完这些调整后，再试试切换路由，退出动画应该就能正常生效啦！

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