css - 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 组也离开了