React Semantic UI - Transitions disappear again

user_4344683 0
Viewed 694

I am using Semantic UI React and have this Transition.Group 

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

when mounting this is triggered

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

The transition works fine but after fading it, it fades out again and is no longer visible.

This only happens on the fade transitions. All others work as intended.

semantic-ui reactjs transition
1 Answers

I had the same problem, for me it was because of loading Bootstrap's CSS to the page, which have this rule:

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

Solved it by disabling that rule:

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