我正在使用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;
}
--- 编辑 ---
我发现它在子路由上能够按预期工作(我的应用程序中只有几个小的子路由)。所有包括子路由的路由都是动态加载的,所以我仍然不确定是什么原因导致它在某些情况下工作而在其他情况下不工作。