I am currently working on a small quiz application where child components (representing questions) are being swapped in. My goal is to add animated transitions between the component swaps using ReactCSSTransitionGroup.
To achieve this, I have created a function that renders the components and wraps them in a ReactCSSTransitionGroup like this:
render() {
return (
<div className=" questions-container">
<ReactCSSTransitionGroup transitionName="switch">
{this.renderQuiz(step)}
</ReactCSSTransitionGroup>
</div>
);
}
The renderQuiz function essentially contains a switch statement that determines the correct component based on the current state, which looks something like this:
renderQuiz(step) {
switch (step) {
case 0:
return (
<StepZero />
);
case 1:
return (
<StepOne />
);
....
}
}
'Step' here refers to a local component variable (this.state.step). While I can see the first component fading in when it loads, there seems to be an issue with transitioning between the component switches.
Below is the CSS code related to the transition effects:
.switch-enter {
opacity: 0.01;
}
.switch-enter.switch-enter-active {
opacity: 1.0;
transition: opacity 500ms ease-in;
}
.switch-leave {
opacity: 1.0;
}
.switch-leave.switch-leave-active {
opacity: 0;
transition: opacity 500ms ease-out;
}
I am currently struggling to make these transitions work seamlessly. Any suggestions or guidance on how to resolve this issue would be highly appreciated. Thank you!