在wouter项目中实现Framer Motion的退出动画

本文将详细介绍如何在wouter路由库中结合Framer Motion实现流畅的页面过渡动画效果，特别是针对组件卸载时的退出动画。

问题背景

许多开发者在使用wouter作为路由解决方案时，希望为页面切换添加动画效果。Framer Motion是一个流行的React动画库，它提供了强大的动画功能，包括组件进入和退出时的动画效果。然而，在wouter中直接使用Framer Motion的AnimatePresence组件时，开发者可能会遇到退出动画不生效的问题。

核心原因分析

Framer Motion的AnimatePresence组件通过检测React树中直接子组件的移除来触发退出动画。而在wouter的标准用法中，Route组件作为AnimatePresence的直接子组件，实际页面内容则是Route的子组件。这种层级关系导致AnimatePresence无法正确感知页面内容的移除，从而无法触发退出动画。

解决方案

方案一：手动条件渲染

最直接的解决方案是绕过Route组件，直接根据路由匹配结果条件渲染内容：

function RouteAnimated() {
  const [match] = useRoute("/");
  
  return (
    <AnimatePresence mode="wait">
      {match && (
        <motion.div
          initial="in"
          animate="stay"
          exit="out"
          variants={animateVariants}
          transition={{ duration: 1 }}
        >
          {/* 页面内容 */}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

这种方法简单直接，但需要手动管理每个路由的匹配状态。

方案二：实现useRoutes钩子

更优雅的解决方案是模拟React Router的useRoutes钩子，创建一个自定义实现：

const useRoutes = (routes) => {
  const [routesLen] = useState(() => routes.length);
  
  if (routesLen !== routes.length) {
    throw new Error("路由数组长度必须保持不变！");
  }

  const matches = routes.map((def) => useRoute(def.path));

  for (let [index, match] of matches.entries()) {
    const [isMatch, params] = match;
    if (isMatch) {
      return cloneElement(routes[index].element, { params });
    }
  }
  return null;
};

使用时可以这样：

const routes = [
  { path: "/", element: <Page1 /> },
  { path: "/2", element: <Page2 /> }
];

function App() {
  return (
    <AnimatePresence mode="wait">
      {useRoutes(routes)}
    </AnimatePresence>
  );
}

关键注意事项

1. 性能优化：为每个路由元素添加唯一的key属性非常重要，推荐使用location对象作为key，而不是仅使用pathname，以确保动画能正确触发。

2. 动画模式：AnimatePresence的mode="wait"属性确保前一个组件完全退出后再进入下一个组件，避免动画冲突。

3. 路由数组稳定性：自定义useRoutes实现中必须保持路由数组长度不变，否则会破坏React Hook规则。

总结

在wouter中实现Framer Motion的退出动画需要理解AnimatePresence的工作原理和路由组件的渲染层级。通过条件渲染或自定义路由钩子，开发者可以灵活地实现各种页面过渡效果。这种解决方案不仅适用于wouter，其原理也可以应用于其他类似场景。

对于复杂的路由动画需求，建议考虑将动画逻辑封装成可复用的高阶组件或自定义Hook，以提高代码的可维护性。