react framer-motion中的退出动画没有出现

Question

我正在创建一个空间查看器应用程序并为动画使用 Framer 运动。 我的目标是被称为loading的起始组件在单击时将退出 animation。 然而，目前我所有的组件都没有退出动画。 它们只会导致其他组件，就好像我只使用 react-router 一样。
我的 app.js 看起来像这样

<AnimatePresence  /* I have tried to put exitBeforeEnter here, it does nothing*/ >
<Route exact path="/" key="loading"  component={Loading} />
            <Route  path="/sol" key="menu"  component={Menu} />

我的loading组件看起来像这样

 const loading = {
        start: {
         scale: 2,
       
        },
        out: {
          scale: .1,
        
        },
      };
      const pagetransition = {
        duration: 2,
      };
    return(
    <motion.div initial="start"
    animate="in"
   exit="out"
    variants={loading}
    transition={pagetransition}    className="loadingScreen"
    >
<NavLink to="/sol"><button ><p >Enter System</p></button></NavLink>
    </motion.div>

目前，我的页面都没有退出动画，但它们确实有进入动画，所以我知道我做的事情并没有完全错误。
我有一个代码框，我的所有代码都在这里可见： 这里

我提前感谢您的帮助。

Answer 1

我在代码沙箱中做了一些更改。 使用 Framer-Motion 进行路线转换非常简单，但涉及一些问题。 首先，您必须在<Switch>... </Switch>之外使用AnimatePresence 。 然后你需要在Switch for Framer-motion 中有一些键来跟踪路线。

我们使用location作为键，为了在 App.js 中使用useLocation()钩子，我们需要在index.js中用Router包围<App /> 。 这就是我所做的。

以下是我到目前为止解释的更改。

在 index.js 中

import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

在 App.js 中

import { Switch, Route, useLocation } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";

function App() {
  const location = useLocation();
  return (
    <AnimatePresence>
      <Switch location={location} key={location.pathname}>
        // all the routes here
      </Switch>
    </AnimatePresence>
  );
}

然后在 loading.js 中，用motion.div包围整个事物。 这个motion.div是动画。 我做了一个简单的从左到右进入，从右到左退出。

在 loading.js 中所做的更改

  const routeTransition = {
    hide: {
      x: "100vw"
    },

    animate: {
      x: 0,
      transition: {
        delay: 0.75,
        duration: 0.75,
        when: "beforeChildren",
        staggerChildren: 0.5
      }
    },

    exit: {
      x: "-100vw",
      transition: {
        duration: 0.75
      }
    }
  };

return (

    <motion.div // this is the div that will animate the entire route
      variants={routeTransition}
      initial="hide"
      animate="animate"
      exit="exit"
    > 
      <motion.div // this div will only animate the button
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={pagetransition}
        className="loadingScreen"
      >
        <NavLink to="/sol">
          <button>
            <p>Enter System</p>
          </button>
        </NavLink>
      </motion.div>
    </motion.div>
  );