<ReactCSSTransitionGroup
  component="div"
  transitionName={transitions}
  transitionAppear
  transitionAppearTimeout={1000}
  transitionEnterTimeout={2000}
  transitionLeaveTimeout={2000}
>
  {React.cloneElement(this.props.children,{
    key: location.pathname,})}
</ReactCSSTransitionGroup>

出现和离开转换工作完美 – 但输入转换不会 – 它们只是立即出现,在新组件输入之后,上一个组件会淡出.

CSS(使用CSS模块)：

.enter {
  opacity: 0.01;
}

.enter.enterActive {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.leave.leaveActive {
  opacity: 0.01;
  transition: opacity 2000ms ease-in;
}

.appear {
  opacity: 0.1;
  transition: opacity 1000ms ease-out;
}

.appearActive {
  opacity: 1;
  transition: opacity 1000ms ease-out;
}

—编辑—

我发现它按照预期在儿童路线上工作(我的应用程序中只有少数几个).包括子路由在内的所有路由都是动态加载的,所以我仍然不知道是什么原因导致在这些情况下工作,而在其他情况下却不行.