我有一个ReactCSSTransitionGroup我使用CSS模块（以及来自react-router的动态路由，但我相信这是按预期工作的。）
<ReactCSSTransitionGroup
component="div"
transitionName={transitions}
transitionAppear
transitionAppearTimeout={1000}
transitionEnterTimeout={2000}
transitionLeaveTimeout={2000}
>
{React.cloneElement(this.props.children, {
key: location.pathname,
})}
</ReactCSSTransitionGroup>
appear和leave转换效果很好 - 但enter转换没有 - 它们只是立即显示，而新组件输入后前一个组件渐渐淡出。
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;
}
---编辑---
我发现它在子路径上按预期工作（我的应用程序中只有少数几个）。包括子路线在内的所有路线都是动态加载的，因此我仍然不确定是什么原因导致它在这些情况下起作用而在其他情况下不起作用。