写了一个fade
,就是渐隐渐现
但是会出现一个问题…就是两个DOM同时出现,然后一个消除,一个再出来…
不像vue
有个mode="out-in"
, 先移除再进入
用的是react-transition-group
,效果如下
过渡的实现代码
const FadeTransitionRouter = props => (
<FadeCss>
<Location>
{({ location }) => (
<TransitionGroup className="transition-group">
<CSSTransition
key={location.key}
classNames="fade"
timeout={300}
unmountOnExit>
<Router location={location} className="router">
{props.children}
</Router>
</CSSTransition>
</TransitionGroup>
)}
</Location>
</FadeCss>
);