我在父组件中有以下代码 - 默认情况下,Module1 将显示并在点击时,它被 module2 替换 - 有这个逻辑,当 module2 切换时尝试添加一些基本的淡入/淡出,但转换确实不会发生..我在这里想念什么?
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
<div className="container" onClick={this.onClick.bind(this)}>
<span>
<a> link
</a>
</span>
{this.state.showModule ? <Module2 /> : <Module1 />}
</div>
</ReactCSSTransitionGroup>
.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
}
.example-enter.example-enter-active {
opacity: 1;
}
.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
opacity: 0.01;
}
.example-appear {
opacity: 0.05;
transition: opacity .5s ease-in;
}
.example-appear.example-appear-active {
opacity: 1;
}