使用ReactCSSTransitionGroup对路由器4 beta 2进行反应

Question

我比较喜欢ReactCSSTransitionGroup的react-motion.下面的代码导致组件在路由更改时淡入(出现),但问题是 - 离开组件不淡出,它立即离开.

<Switch>
    <FadeRoute exact path="/" component={PageLanding}/>
    <FadeRoute path="/login" component={PageLogin}/>
    <FadeRoute path="/signup" component={PageSignup}/>
    <FadeRoute component={Page404}/>
</Switch>

function FadeRoute({component:Component, ...rest}) {
    return (
        <Route {...rest} children={({location,match}) => (
                <ReactCSSTransitionGroup {...{key:Date.now(), transitionName:'fade', transitionAppear:true, transitionEnter:true, transitionLeave:true, transitionAppearTimeout:300, transitionEnterTimeout:300, transitionLeaveTimeout:300})}>
                    <Component/>
                </ReactCSSTransitionGroup>
        )} />
    );
}

<style>
.fade-enter, .fade-appear { opacity:0; }
.fade-enter.fade-enter-active,
.fade-appear.fade-appear-active { opacity:1; transition: opacity 300ms; }
.fade-leave { opacity:1; }
.fade-leave.fade-leave-active { opacity:0; transition: opacity 300ms; }
</style>

Answer 1

有效的方式<Switch>是它只渲染第一个<Route>路径与当前位置匹配的路径.这意味着在导航时,导航时<FadeRoute>会立即卸载现有的现有内容.它的孩子<CSSTransitionGroup>也没有下岗,所以它没有机会为孩子们进行假期过渡.

什么你想要做的是你的包裹<Switch>中<CSSTransitionGroup>.的<Switch>是将要转换的组成部分,所以它应该有一个key.您还应该将location对象传递给它,这样当a <Switch>离开时,它会使用旧的location而不是当前的动画进行动画制作.

<CSSTransitionGroup
  transitionName='fade'
  transitionEnterTimeout={500}
  transitionLeaveTimeout={500}
>
  <Switch key={location.pathname} location={location}>
    <Route path="/red" render={Red} />
    <Route path="/green" render={Green} />
    <Route path="/blue" render={Blue} />
  </Switch>
</CSSTransitionGroup>