リアクションルータとCSSTransitionGroupを使ったページ遷移のアニメーション

Question

私は反応があるCSS遷移グループを学習しようとしています。次のコードを実行すると、ページがフェードインします。私はキャリアのURL約URLから行くとき

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router'; 
import { createHistory } from 'history'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import Config from './Settings/Config'; 
import App from './Components/App'; 
import About from './Components/About'; 
import Career from './Components/Career'; 

const CONFIG = new Config(); 
const CORP = CONFIG.baseNameCorp; 
const LEASING = CONFIG.baseNameLeasing; 

const browserHistory = useRouterHistory(createHistory)({basename:CONFIG.baseName}) 

render((
    <ReactCSSTransitionGroup 
    transitionName="example" 
    transitionAppear={true} 
    transitionAppearTimeout={1000} 
    transitionLeaveTimeOut={1000}> 

    <Router history={browserHistory}> 
    <Route path={CORP} component={App}> 
    <Route path={CORP+"career"} component={Career} /> 
    </Route> 
    </Router> 
    </ReactCSSTransitionGroup> 
), document.getElementById('app')) 

はしかし、私が本当にやりたかったことは、私たちについてフェードアウトするコンポーネントやフェードインするキャリアコンポーネント、およびその逆のためには必要です。だから私はこのコードを実行しようとしました：

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router'; 
import { createHistory } from 'history'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import Config from './Settings/Config'; 
import App from './Components/App'; 
import About from './Components/About'; 
import Career from './Components/Career'; 

const CONFIG = new Config(); 
const CORP = CONFIG.baseNameCorp; 
const LEASING = CONFIG.baseNameLeasing; 

const browserHistory = useRouterHistory(createHistory)({basename:CONFIG.baseName}) 

render((
    <Router history={browserHistory}> 
    <Route path={CORP} component={App}> 
     <ReactCSSTransitionGroup 
     transitionName="example" 
     transitionAppear={true} 
     transitionAppearTimeout={1000} 
     transitionLeaveTimeOut={1000}> 
      <Route path={CORP+"about"} component={About} /> 
     </ReactCSSTransitionGroup> 
     <ReactCSSTransitionGroup 
     transitionName="example" 
     transitionAppear={true} 
     transitionAppearTimeout={1000} 
     transitionLeaveTimeOut={1000}> 
      <Route path={CORP+"career"} component={Career} /> 
     </ReactCSSTransitionGroup> 
    </Route> 
    </Router> 
), document.getElementById('app')) 

しかし、このコードは効果がないようです。 about urlとcareer URLの間を移動すると、2つのコンポーネントが突然隠れて表示されます。フェードトランジションを動作させるにはどうすればよいですか？

Answer 1

あなたは、メインのアプリケーションコンポーネントでReactCSSTransitionを含めると

class App extends React.Component { 
    render() { 
    return (
    <div> 
    <ul> 
     <li><Link to="/page1">Page 1</Link></li> 
     <li><Link to="/page2">Page 2</Link></li> 
    </ul> 

    <ReactCSSTransitionGroup 
      transitionName="example" 
      transitionAppear={true} 
      transitionAppearTimeout={1000} 
      transitionLeaveTimeOut={1000}> 
       {React.cloneElement(this.props.children, { 
        key: location.pathname 
       })} 
    </ReactCSSTransitionGroup> 
    </div> 
    ) 
    } 

} 

を使用して、その子にトランジションをレンダリングしてからルートが正常に書かれていることができます。

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router'; 
import { createHistory } from 'history'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import Config from './Settings/Config'; 
import App from './Components/App'; 
import About from './Components/About'; 
import Career from './Components/Career'; 

const CONFIG = new Config(); 
const CORP = CONFIG.baseNameCorp; 
const LEASING = CONFIG.baseNameLeasing; 

const browserHistory = useRouterHistory(createHistory)({basename:CONFIG.baseName}) 

render((
    <Router history={browserHistory}> 
    <Route path={CORP} component={App}> 
     <Route path={CORP+"about"} component={About} /> 
     <Route path={CORP+"career"} component={Career} /> 
    </Route> 
    </Router> 
), document.getElementById('app'))