Currently, I am working on creating tabs in React JS and incorporating animations using React-addons-css-transition-group.
The code snippet I have written for this purpose is as follows:
render() {
let view = this.state.tiresView ? this.renderTiresView() : this.renderOptionsView();
return (
<div >
<div className="tiresFeaturesTitle">
<Link to="" onClick={this.changeView.bind(this, "options")} >Options</Link>
<Link to="" onClick={this.changeView.bind(this, "tires")} >Tires</Link>
</div>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={500} transitionAppear={true} transitionAppearTimeout={500}>
<div key={this.state.tiresView}>
{view}
</div>
</ReactCSSTransitionGroup>
</div>
);
}
The CSS styles for the example class are as follows:
.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;
}
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
transition: opacity .5s ease-in;
}
Although the functionality works fine, I am encountering an issue where the previous tab content briefly appears when switching tabs. I would like to prevent this from happening.
For visual reference, you can see in the image linked here how the old tab content briefly displays when changing tabs. This behavior is what I am trying to resolve.