Currently, I am utilizing react-transition-group to assist in managing transitions between different elements. My goal is to create a quiz where each question slides over the previous one once a user answers it. However, I've encountered an issue with my transition causing the divs to stack vertically instead of sliding over like cards. Here is a link to a sandbox example of what I have implemented so far.
Here is the relevant code:
Transition Group Section
renderQuestion = () => {
const question = this.questionsToAnswer[this.state.currentQuestionIndex];
return (
<div
style={{
display: "flex",
flexDirection: "row"
}}
>
<TransitionGroup className="slide-group">
<CSSTransition
classNames="slide"
timeout={{ enter: 500, exit: 500 }}
key={`${this.state.currentQuestionIndex}`}
>
<div>
<div
style={{
fontFamily: "Oswald",
fontStyle: "normal",
fontWeight: 500,
fontSize: "28px",
letterSpacing: "0.05em",
color: "#003E4C",
marginBottom: "10px",
width: "700px"
}}
>
{question["description"]}
</div>
<div>{this.renderRadioQuestion(question["answers"])}</div>
</div>
</CSSTransition>
</TransitionGroup>
</div>
);
};
styles.css Section
/* ANIMATIONS */
.slide-enter {
transform: translateX(100%);
}
.slide-enter-active {
transform: translateX(0%);
transition: transform 500ms ease-in-out;
}
.slide-exit {
transform: translateX(0%);
}
.slide-exit-active {
transform: translateX(-100%);
transition: transform 500ms ease-in-out;
}
/* not sure how to style this so that i can transition divs nicely*/
.slide-group {
/* display: flex;
flex-wrap: nowrap; */
}