反應路由器v4組件轉換與ReactCSSTransitionGroup插件

我想在反應中做一個非常簡單的組件不透明轉換。我正在使用ReactCSSTransition組來執行此操作，並且我相信我已經正確設置了它，但似乎沒有工作。我希望有這方面的幫助，請參見下面我codepen：反應路由器v4組件轉換與ReactCSSTransitionGroup插件

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

謝謝

來源

2017-04-04 W9914420

你需要用每個路由組件在<CSSTransitionGroup>，所以你可以創建更高階的函數來返回被包裝的組件在<CSSTransitionGroup>。例如。檢查下面的codepen，我用動畫更新它。

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

高階組件，您可以在這裏頭以上。

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

來源

2017-04-13 12:55:03

謝謝你的例子，在你的codepen我注意到，當點擊子路徑組件「藝術品」動畫的兩倍。有沒有辦法阻止這種行爲的發生。你只想讓它在點擊時動畫一次。 – W9914420

對我來說它的工作正確，我的意思是點擊它的動畫，如果你不想在子路線上的動畫，只是刪除圖稿路線中的TransitionedPage功能，它不會動畫。 :) –

請注意，如果您再次點擊「家庭」或「用戶」鏈接，該特定組件加載後動畫將無法再播放。然而，如果您一再重複鏈接，「藝術作品」組件將不斷重播，這是正確的行爲嗎？如果是的話，你將如何重寫它以像根鏈接一樣行事？ tnx – W9914420

反應路由器v4組件轉換與ReactCSSTransitionGroup插件

回答

相關問題