反应路由动画中路由之间的白色页面

Question

我试图在react路由中创建动画，但遇到了一个问题：动画可以工作，但转换之间有一个空白(白色(页面。这看起来像是一个白色的眨眼。先眨眼，然后是动画。问题是什么？

index.js-导入应用程序组件的主要组件，如下所示。

ReactDOM.render(
<HashRouter >
<Route render={({ location }) => (
<App location={location}/>
)}/>
</HashRouter>,
document.getElementById('root')
);

然后app.js，它有路由。

function App({location}) {
return (
<div className="App">
<Header/>
<main>
<TransitionGroup>
<CSSTransition
timeout={200}
classNames='page'
key={location.pathname}>
<Switch>
<Route exact path='/' component={Main}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
</Switch>
</CSSTransition>
</TransitionGroup>
</main>
<Footer/>
</div>
);
}
export default App;

然后style.css

.page {
position: absolute;
left: 15px;
right: 15px;
}
.page-enter {
opacity: 0;
transform: scale(1.1);
}
.page-enter-active {
opacity: 1;
transform: scale(1);
transition: opacity 200ms, transform 300ms;
}

Answer 1

这与CSSTransition的其他用法没有什么不同，只需使确保将location传递给Switch，以便它可以匹配旧位置随着它的动画化。

<Switch location={location}>

https://reactrouter.com/web/example/animated-transitions