[英]react-transition-group not working with React Router
I have a problem with React transitions group. 我有React过渡组的问题。 For some reason, the fade in and out is not working on Router Switch. 出于某种原因,淡入和淡出不适用于路由器交换机。 I have read the documentation and implemented it inside my App. 我已经阅读了文档并在我的应用程序中实现了它。
Don't know what is wrong with my code. 不知道我的代码有什么问题。
My React code: 我的反应代码:
const App = () => (
<Router>
<Menu />
<TransitionGroup>
<CSSTransition
timeout={{ enter: 300, exit: 300 }}
classNames={'fade'}>
<Switch>
{routes.map(route => (
<Route
exact
key={route.path}
path={route.path}
component={route.component}
/>
))}
</Switch>
</CSSTransition>
</TransitionGroup>
</Router>
);
export default App;
Css code: Css代码:
.fade-enter {
opacity: 0.01;
&.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
}
.fade-exit {
opacity: 1;
&-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
}
Nevermind, forgot to wrap it: 没关系,忘了把它包起来:
<Route render={({ location }) => (
Thanks. 谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.