React Semantic UI - 过渡再次消失

Question

我正在使用 Semantic UI React 并拥有这个 Transition.Group

componentDidMount(){
    setTimeout(() => { this.setState({showBlogList: true}) }, 3500);
}

安装时触发

<Transition.Group animation='fade up' duration={2000}>
    {this.state.showBlogList && <Container id='blogPostList'>
    </Container>}
</Transition.Group>

过渡效果很好，但在淡出之后，它又淡出并且不再可见。

这只发生在淡入淡出过渡中。所有其他人都按预期工作。

Answer 1

我遇到了同样的问题，对我来说是因为将 Bootstrap 的 CSS 加载到页面中，页面有这样的规则：

.fade:not(.show) {
    opacity: 0;
}

通过禁用该规则来解决它：

.fade:not(.show){
    opacity: unset !important;
}