React Router v4 Komponente Übergang mit ReactCSSTransitionGroup Add-on

Question

Ich versuche, eine sehr einfache Komponente Opazität Übergang in reagieren. Ich benutze die ReactCSSTransition-Gruppe, um dies auszuführen, und ich glaube, dass ich die Dinge richtig eingerichtet habe, aber es scheint nicht zu funktionieren. Ich würde auf diese jede Hilfe dankbar bitte unter meinem codepen sehen:

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

Danke

Answer 1

Sie müssen jede Ihrer geroutet Komponenten wickeln In <CSSTransitionGroup> können Sie Funktionen höherer Ordnung erstellen, um die Komponente zurückzugeben, die eingepackt ist in <CSSTransitionGroup>. Für Beispiel überprüfe den Codepen, ich habe ihn mit Animation aktualisiert.

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

Für Komponenten höherer Ordnung, können Sie hier den Kopf.

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