我有以下代码:
import React from "react";
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import Hi from "./Hi";
import Something from "./Something";
import "./App.css";
const App = () => {
return (
<BrowserRouter>
<AnimatePresence>
<NavLink to="/">Hi</NavLink>
<br />
<NavLink to="/something">Something</NavLink>
<hr />
<Route path="/" exact={true} key="1">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 2 }}
key="hi"
>
<Hi />
</motion.div>
</Route>
<Route path="/something" exact={true} key="2">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
key="something"
transition={{ duration: 2 }}
>
<Something />
</motion.div>
</Route>
</AnimatePresence>
</BrowserRouter>
);
};
export default App;
它应该在
<Hi/>
时执行淡入动画。和 <Something/>
已安装,并在卸载时淡出。安装动画发生,但另一个没有。两个组件在动画效果开始前都卸载了,所有动画库都出现这个问题:framer-motion
, react-transition-group
, 和别的。
最佳答案
不确定您是否仍在寻找答案,但我通过添加 exitBeforeEnter
解决了类似的问题。标志到 AnimatePresence
.
所以...
//...
<AnimatePresence exitBeforeEnter>
<NavLink to="/">Hi</NavLink>
<br />
<NavLink to="/something">Something</NavLink>
<hr />
//...
关于reactjs - React Router + 动画库问题 : components won't animate before unmounting with react-router-dom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61846439/