Question

我试图通过反应学习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'))

然而，我真正想要做的是当我从关于网址到职业网址时，我希望关于我们的组件淡出，并希望职业组件淡入，反之亦然。所以我试着做这个代码：

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

但是这段代码似乎没有效果。当我进入大约网址和职业网址之间时，这两个组件突然隐藏并显示出来。如何使淡入淡出过渡起作用？

Answer 1

您可以在主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'))

使用React Router和CSSTransitionGroup进行动画页面转换

1 个答案: