Question

我正在尝试在反应中做一个非常简单的组件不透明度转换。我正在使用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>中的组件。对于前者检查下面的codepen，我用动画更新了它。

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

对于更高阶的组件，你可以在这里。

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

使用ReactCSSTransitionGroup附加组件实现路由器v4组件的转换

1 个答案: