1

我正在尝试通过反应学习 css 过渡组。当我运行以下代码时，我的页面将淡入。

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'))

但是，我真正想要做的是，当我从 about url 转到 career url 时，我希望 about us 组件淡出，并让事业组件淡入，反之亦然。所以我试着做这个代码：

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 之间切换时，这两个组件会突然隐藏和显示。如何让淡入淡出过渡工作？

4

1 回答 1

0

您可以在主 App 组件中包含 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'))
于 2016-09-28T09:21:52.103 回答