React CSSTransitionGroup不會添加離開類

Question

我有一個組件在10秒後被卸載，而我似乎無法獲得與React CSSTransitionGroup一起工作的離開動畫。當組件裝載和這些動畫運行良好時，出現的類會被添加。但是，離開類永遠不會在卸載時添加到組件中。我發現了幾個可用的jsfiddle示例，但代碼對我不起作用。我對React很陌生，所以我希望有人能指出我正確的方向。我已經設置了超時時間來查看是否添加了類。

主要成份：

this.state = { 
renderBlankSlate: true, 
//the rest of the initial state.. 
} 

// This unmounts the component 
componentDidMount() { 
    this.interval = setTimeout(() => this.setState({renderBlankSlate: false}), 10000); 
} 

{ this.state.renderBlankSlate ? 
       <ReactCSSTransisionGroup 
        component="div" 
        transitionName="slide" 
        transitionEnterTimeout={ 500 } 
        transitionAppear={ true } 
        transitionAppearTimeout={ 2000 } 
        transitionLeaveTimeout={ 5000 } 
       > 
        <BlankSlate /> 
       </ReactCSSTransisionGroup> 
       : null } 

CSS：

.slide-appear { 
transform: translateX(110%); 
height: 0; 
opacity: 0; 
} 
.slide-appear.slide-appear-active { 
transform: translateX(0); 
height: 100%; 
opacity: 1; 
transition: all 2s ease-in; 
} 

.slide-leave { 
transform: translateX(0); 
} 
.slide-leave.slide-leave-active { 
transform: translateX(110%); 
transition: 5s ease-in; 
} 

Answer 1

你可能要添加過渡族內三元。

<ReactCSSTransitionGroup 
    component="div" 
    transitionName="slide" 
    transitionEnterTimeout={ 500 } 
    transitionAppear={ true } 
    transitionAppearTimeout={ 2000 } 
    transitionLeaveTimeout={ 5000 } 
> 
    {this.state.renderBlankSlate ? <BlankSlate /> : null} 
</ReactCSSTransitionGroup> 

你離開的動畫不點火的原因是因爲過渡組離開以及