带有 ReactCSSTransitionGroup 附加组件的 React Router v4 组件转换

Question

我正在尝试在 React 中做一个非常简单的组件不透明度转换。我正在使用 ReactCSSTransition 组来执行此操作，我相信我已正确设置，但它似乎不起作用。如果对此有任何帮助，我将不胜感激，请参阅下面我的代码笔：

let {BrowserRouter,Link,Route} = ReactRouterDOM;

let Router = BrowserRouter;

let ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

class Artwork extends React.Component {

render() {
return (
  <div>
        <h3>Art</h3>
    </div>
  );
 }
}

class Home extends React.Component {
render() {
return (
  <h1>Home</h1>
  );
 }
}

class User extends React.Component {

render() {
return (

  <div className="row">
    <div className="col-md-4">
        <h3>The User Page</h3>
        <p>User ID:</p>
        <li><Link to="/user/artwork">Artwork</Link></li>
    </div>
    <div className="col-md-8">
        <Route path="/user/artwork" component={Artwork}/>
    </div>

  </div>

  );
 }
}



 class App extends React.Component {

 render() {
 return (

  <Router>
        <div className="container">
            <div className="row">
                <div className="col-xs-10 col-xs-offset-1">
                  <ul>
                    <li><Link to="/user">User</Link></li>
                    <li><Link to="/home">Home</Link></li>
                  </ul>
                </div>
            </div>
            <hr/>
            <div className="row">
                <div className="col-xs-10 col-xs-offset-1">
                  <ReactCSSTransitionGroup 
                     transitionName="example"
                     transitionAppear={true}
                     transitionAppearTimeout={1500}>
                    <Route path="/" exact component={Home}/>
                    <Route path="/home" exact component={Home}/>
                    <Route path="/user" component={User}/>
                  </ReactCSSTransitionGroup>

                </div>
            </div>
        </div>
    </Router>

   );
  }

 }

ReactDOM.render(
<App />,
document.getElementById('root')
);

CSS

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity 1500ms ease-in;
}

React route transitions

谢谢

Answer 1

您需要将每个路由组件包装在 <CSSTransitionGroup> 中，以便您可以为包装在 <CSSTransitionGroup> 中的 return 组件创建高阶函数。对于前。检查下面的codepen，我用动画更新了它。

http://codepen.io/anon/pen/ZKENXy?editors=0111

对于高阶组件，您可以前往此处。

https://facebook.github.io/react/docs/higher-order-components.html

带有 ReactCSSTransitionGroup 附加组件的 React Router v4 组件转换

React Router v4 component transition with ReactCSSTransitionGroup add-on

javascript

reactjs

react-router

reactcsstransitiongroup