Reactルータ4ベータ2 ReactCSSTransitionGroup

Question

私はreact-motionのためにReactCSSTransitionGroupを好む。以下のコードでは、ルート変更時にコンポーネントがフェードイン（表示）されますが、残っているコンポーネントがフェードアウトしていない場合、即座に終了します。

<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にする必要があります。また、オブジェクトに渡して、<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>