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

Question

我正在创建一个 space 查看器应用程序并使用 Framer 动画制作动画。我的目标是称为 loading 的起始组件在被单击时将有一个退出动画。但是目前我所有的组件都没有退出动画。它们只是导致其他组件，就好像我只使用 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>

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

预先感谢您的帮助。

Answer 1

我对代码沙箱进行了一些更改。使用 Framer-Motion 进行路由转换非常简单，但有点复杂。首先，您必须在 <Switch> ... </Switch> 之外使用 AnimatePresence。然后你需要在 Switch 中输入一些键，以便 Framer-motion 跟踪路线。

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

这是我到目前为止所解释的更改。

在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>
  );

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

Exit animations in react framer-motion not appearing

javascript

reactjs

framer-motion