While implementing page transitions with react-router-dom and react-spring's useTransitions, I encountered some bugs despite the transition animation working well. I believe CSS might help resolve these issues, but I am unsure about the exact approach. If you have any insights on how to fix this, I would greatly appreciate your assistance.
I experimented with page transitions using react-router-dom, react-spring, useTransitions, animated, and __RouterContext
No error messages were displayed, just a few bugs
The transition effect currently moves from bottom to top, but ideally, I would like it to be centered while providing an opacity effect when transitioning between pages.
function App() {
const { location } = useContext(__RouterContext);
const transitions = useTransition(location, location => location.pathname, {
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 }
});
return (
<React.Fragment>
<Navbar />
{transitions.map(({ item, props, key }) => (
<animated.div key={key} style={props}>
<Switch location={item}>
<Route exact path="/" component={Home} />
<Route exact path="/profile" component={Profile} />
<Route exact path="/about" component={About} />
<Route exact path="/project" component={Project} />
<Route exact path="/contact" component={Contact} />
</Switch>
</animated.div>
))}
</React.Fragment>
);
}
export default App;