2016-03-07 38 views
9

我有ReactCSSTransitionGroup工作正常(我認爲),新安裝的組件淡入所有的榮耀。ReactCSSTransitionGroup只對新組件有動畫效果嗎?

的問題是,作爲替代只是突然組件將消失,我的一個問題,因爲最終我想,在進出視我的部件過渡...

我似乎沒有看到任何告訴離開組件如何優雅地消失的方式。

我是否錯過了某些東西,或者是ReactCSSTransitionGroup只能動畫傳入組件?

UPDATE

下面的代碼:

import React from "react"; 
import ReactDOM from "react-dom"; 
import { Router, Route, IndexRoute, hashHistory, Link } from "react-router"; 
import ReactCSSTransitionGroup from "react-addons-css-transition-group"; 


class PageOne extends React.Component { 
    render() { 
    return (
     <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}> 
     <div> 
      HI FROM PAGE ONE<br /> 
      <br /> 
      <Link to="two">Take me to Page Two</Link> 
     </div> 
     </ReactCSSTransitionGroup> 
    ); 
    } 
} 
class PageTwo extends React.Component { 
    render() { 
    return (
     <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}> 
     <div> 
      HELLO FROM PAGE TWO<br /> 
      <br /> 
      <Link to="/">Go back to Page One</Link> 
     </div> 
     </ReactCSSTransitionGroup> 
    ); 
    } 
} 


const app = document.getElementById('app'); 
ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" component={PageOne}></Route> 
    <Route path="two" component={PageTwo}></Route> 
    </Router>, 
app); 

而CSS:

.example-enter { 
    opacity: 0.01; 
} 
.example-enter.example-enter-active { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 
.example-leave { 
    opacity: 1; 
} 
.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 300ms ease-in; 
} 
+0

上[反應過渡(https://facebook.github.io/react/docs/animation.html)說明解釋,你可以對出現的轉變,進入並留下。如果您需要進一步的幫助,可以分享一些代碼嗎? – wintvelt

+0

用最少的代碼更新了帖子,以顯示我的目標。上面的代碼不會在組件mount/unmount上淡入/淡出。 – Stefan

回答

2

我創建了一個bin這是工作的罰款部件被安裝/卸載。看看,讓我知道它是否類似於你在做什麼,仍然無法解決問題

+0

這可能是我試圖描述問題的錯。我實際上試圖實現的是使用ReactCSSTransitionGroup的頁面之間的轉換。 – Stefan

+0

另一個問題可能是,ReactCSSTransitionGroup應該用於頁面轉換的開始? – Stefan

+0

我把代碼降到了最低限度,請看上面的內容以查看我所指的內容。這些組件在安裝/卸載時不會淡入/淡出。 ReactCSSTransitionGroup僅適用於轉換列表項等內容嗎?我是否需要嘗試處理列表中的項目等頁面? – Stefan