React CSSTransitionGroup не добавляет классы отпуска

Question

У меня есть компонент, который размонтируется через десять секунд, и я просто не могу заставить анимацию отпуска работать с 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> 

Причина ваш отпуск анимация не стрелять, потому что группа Transition уходит, а