Framer Motion路由切换淡入淡出过渡如何实现一次编写全页面复用

你可以通过以下两种方案实现一次编写、全页面复用过渡动画逻辑：

方案1：封装公共过渡容器组件 #

把动画逻辑全部封装到独立的公共组件中，所有页面直接引用该组件作为外层容器即可，无需单独编写动画配置。

// src/components/FadeTransition.jsx
import { motion } from 'framer-motion'

// 统一管理淡入淡出动画配置
const fadeVariants = {
  hidden: { opacity: 0 },
  visible: { 
    opacity: 1, 
    transition: { duration: 0.3, ease: "easeInOut" } 
  },
  exit: { 
    opacity: 0, 
    transition: { duration: 0.3, ease: "easeInOut" } 
  }
}

export default function FadeTransition({ children }) {
  return (
    <motion.div
      variants={fadeVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
    >
      {children}
    </motion.div>
  )
}

页面使用示例：

// src/pages/Home.jsx 任意页面组件
import FadeTransition from '../components/FadeTransition'

export default function Home() {
  return (
    <FadeTransition>
      {/* 页面原有业务内容 */}
      <h1>首页内容</h1>
    </FadeTransition>
  )
}

方案2：封装高阶组件批量注入 #

如果不想修改原有页面的代码结构，可以用高阶组件在路由配置层统一给页面组件包裹动画逻辑：

// src/utils/withFadeTransition.js
import { motion } from 'framer-motion'

const fadeVariants = {
  hidden: { opacity: 0 },
  visible: { 
    opacity: 1, 
    transition: { duration: 0.3, ease: "easeInOut" } 
  },
  exit: { 
    opacity: 0, 
    transition: { duration: 0.3, ease: "easeInOut" } 
  }
}

export default function withFadeTransition(Component) {
  return function WrappedComponent(props) {
    return (
      <motion.div
        variants={fadeVariants}
        initial="hidden"
        animate="visible"
        exit="exit"
      >
        <Component {...props} />
      </motion.div>
    )
  }
}

路由层使用示例：

// App.js 路由配置文件
import { useLocation, Switch, Route } from 'react-router-dom'
import { AnimatePresence } from 'framer-motion'
import withFadeTransition from './utils/withFadeTransition'
import Home from './pages/Home'
import About from './pages/About'

// 统一给页面组件注入动画逻辑，无需修改原有页面代码
const AnimatedHome = withFadeTransition(Home)
const AnimatedAbout = withFadeTransition(About)

export default function App() {
  const location = useLocation()
  // 原有AnimatePresence配置无需修改
  return (
    <AnimatePresence>
      <Switch location={location} key={location.pathname}>
        <Route path="/" exact component={AnimatedHome} />
        <Route path="/about" component={AnimatedAbout} />
      </Switch>
    </AnimatePresence>
  )
}

通用说明 #

• 两种方案都不需要改动你现有AnimatePresence的配置逻辑
• 后续需要调整动画参数时，仅需修改公共配置文件即可同步到所有页面

内容的提问来源于stack exchange，提问作者A.Anvarbekov