Reactjs 具有帧运动的动画路径
嗨,我尝试在退出时设置两条路线的动画,从不透明度1到0。但是由于某种原因,在Reactjs 具有帧运动的动画路径,reactjs,router,framer-motion,Reactjs,Router,Framer Motion,嗨,我尝试在退出时设置两条路线的动画,从不透明度1到0。但是由于某种原因,在上单击路由将更改(例如,'/'=>'/chat?name=bob&room=here'),但页面内容保持不变,并且不会呈现该特定路由的组件。此外,动画是伟大的工作,一旦我使用“返回按钮”从浏览器 有人知道为什么不点击按钮吗 App.js return ( <div> <Router> <AnimatePresence exitBeforeEnter>
上单击路由将更改(例如,'/'=>'/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>
);
返回(
);
Login.js
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>
);
返回(
//相同代码
(!name | |!room?event.preventDefault():null)}
to={`/chat?name=${name}&room=${room}}
>
登录
);
聊天室
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>
);
};
返回(
);
};
您在motion.div上的初始和退出道具似乎使用了相同的键,即“out”,请尝试为退出道具指定不同的键。在进行更改时,不要忘记调整变体