I am currently developing a questionnaire system using react and I am aiming to achieve smooth transitions for the questions.
Below is the render method for the component that showcases the questions:
render () {
const { loadingQuestion, question, userId, actions } = this.props;
const q = this.renderQuestion(question, (...args) => actions.answerQuestion(userId, ...args), (...args) => actions.skipQuestion(userId, ...args));
return (
<ul className="questions">
<ReactCSSTransitionGroup
transitionName="question"
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}
>
{q}
</ReactCSSTransitionGroup>
</ul>
);
}
Here is the CSS code I am currently utilizing for achieving vertical transition effects:
.question-enter {
transform: translateY(100%);
}
.question-enter.question-enter-active {
transform: translateY(0%);
transition: transform 1000ms ease-in-out;
}
.question-leave {
transform: translateY(0%);
}
.question-leave.question-leave-active {
transform: translateY(-100%);
transition: transform 1000ms ease-in-out;
}
You can view the current behavior on this page:
If anyone has insights as to why the CSS does not result in a sliding out effect for the question but rather causes it to disappear, please share your thoughts!
Thank you!