保留转换未应用于ReactCSSTransitionGroup

Question

我有以下组件：

  <ReactCSSTransitionGroup
    transitionName={transitionName}
    transitionAppear={true}
    transitionLeave={true}
  >
    {children}
  </ReactCSSTransitionGroup>

以下css类：

.slide-appear {
  max-height: 0;
}

.slide-appear.slide-appear-active {
  max-height: 100vh;
  overflow: visible;
  transition: max-height 500ms ease-in;
}

.slide-leave {
  max-height: 100vh;
}

.slide-leave.menu-leave-active {
  overflow: hidden;
  max-height: 0px;
  transition: max-height 500ms ease;
}

转换正在显示，但不适用于离开。

Answer 1

根据documentation，您使用此道具禁用了动画：

ext4

删除它，问题解决了。

同样作为快速提醒，transitionLeave={false} 用于组件的enable animation after initial mount，而不是启用输入动画。