具有成帧器运动的动画路线答案

【问题标题】：animation routes with framer motion具有成帧器运动的动画路线
【发布时间】：2021-01-13 08:59:56
【问题描述】：

您好，我尝试在退出时从不透明度 1 到 0 为 2 条路线设置动画。但是由于某种原因，在<Link> 上单击路线会改变（例如，'/' => '/chat?name=bob&room=here'），但页面内容保持不变，并且不会呈现该特定路线的组件。一旦我使用浏览器中的“返回按钮”，动画效果也很好。

有人知道为什么不点击按钮吗？

App.js

return (
    <div>
      <Router>
        <AnimatePresence exitBeforeEnter>
          <Switch location={location} key={location.key}>
            <Route path="/" exact component={Login}></Route>
            <Route path="/chat" component={ChatRoom}></Route>
          </Switch>
        </AnimatePresence>
      </Router>
    </div>
  );

return (
    <motion.div
      initial="out"
      animate="in"
      exit="out"
      variants={pageTransition}
      className="Login-Container"
    >

//same code
      
        <Link
          onClick={(event) => (!name || !room ? event.preventDefault() : null)}
          to={`/chat?name=${name}&room=${room}`}
        >
          <button
            
            type="submit"
            className="Login-Button"
          >
            Sign In
          </button>
        </Link>
    </motion.div>
  );

ChatRoom.js

return (
    <motion.div
      initial="out"
      animate="in"
      exit="out"
      variants={pageTransition}
      className="ChatRoom-Container"
    >
      <div className="ChatRoom-NavBar">
        <NavLink to="/">
          <div  
            className="ChatRoom-BackButton"
            style={{ backgroundImage: `url(${arrow})` }}
          ></div>
        </NavLink>

        </div>
    </motion.div>
  );
};

【问题讨论】：

标签： reactjs router framer-motion

【解决方案1】：

motion.div 上的初始和退出道具似乎使用相同的键，即“out”尝试为退出道具提供不同的键。进行更改时也不要忘记调整您的变体。

【讨论】：