ReactCssTransitionGroup，调低不透明度，然后将其向上滑动

Question

亲爱的stackOverFlow朋友们！

我今天的问题是： 我有一个包装在ReactCssTransitionGroup标记中的标头， 现在我要调整不透明度并同时向上滑动，但我想将不透明度降低到0，然后再向上滑动以使其不显示。

这是我的代码：

CSS ：

.headTransition-enter {
    opacity: 0.01;
    height: 0px;
}

.headTransition-enter.headTransition-enter-active {
    opacity: 1;
    transition: 500ms ease-in;
    height: 520px;
}

.headTransition-leave {
    opacity: 1;
    height: 520px;
}

.headTransition-leave.headTransition-leave-active {
    opacity: 0.01;
    transition: 500ms ease-in;
    height: 0px;
}

组件：

<ReactCSSTransitionGroup
     transitionName="headTransition"
     transitionEnterTimeout={500}
     transitionLeaveTimeout={500}>
          {!this.props.tabClicked && <Header/>}
</ReactCSSTransitionGroup>

非常感谢您的回答！