Animating div (enter and exit) in React - css

Question

I want to build a simple "carousel" in React. I have a list of questions that I want the user to answer. When you click on next, it shows the next question. I want to also add a previous button in the future. Currently the animation for the item being revealed works.
However on mobile the screen jumps up when its animating from one div to another (with a slight delay)
The height of the parent div is always the same, so why would it jump?
JSX
{ this.state.activeIndex === 0 &&
<div className="surveyContainer--surveyList__animate">
<div>
<SelectField labels={data.meat.labels} value={this.props.survey.meat}/>
</div>
<div>
<Button handleClick={() => this.handleActiveIndex(2)} label="Next"/>
</div>
</div>
}
{this.state.activeIndex === 1 &&
<div className="surveyContainer--surveyList__animate">
<div>
<SelectField labels={data.energy.labels} value={this.props.survey.energy}/>
</div>
<div>
<Button handleClick={() => this.handleActiveIndex(2)} label="Next"/>
</div>
</div>
}
<SelectField/> and Button are both custom components.
CSS
.surveyContainer--surveyList__animate {
animation: slide-in 0.4s ease;
}
#keyframes slide-in {
0% {
opacity: 0;
transform: translateX(200px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
How do I fix the jumping? Also what might be a better approach to do this entire thing? If I want to add a previous button, then switching the animation will be a painstaking feature.

Answer 1

Edit:
For the jumping issue, try setting the parent's position to relative, then, for the child container:
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
I recommend ReactTransitionGroup:
https://reactcommunity.org/react-transition-group/css-transition
Your code would look something like this:
import { CSSTranstion } from 'react-transition-group'
<CSSTranstion in={this.state.activeIndex === 0} timeout={200} classNames="survey-list" unmountOnExit>
<div className="survey-list">
<div>
<SelectField labels={data.meat.labels} value={this.props.survey.meat}/>
</div>
<div>
<Button handleClick={() => this.handleActiveIndex(2)} label="Next"/>
</div>
</div>
</CSSTransition>
<CSSTranstion in={this.state.activeIndex === 1} timeout={200} classNames="survey-list" unmountOnExit>
<div className="survey-list">
<div>
<SelectField labels={data.energy.labels} value={this.props.survey.energy}/>
</div>
<div>
<Button handleClick={() => this.handleActiveIndex(2)} label="Next"/>
</div>
</div>
</CSSTransition>
Then your CSS:
.survey-list {
opacity: 1;
transform: translateX(0);
}
.survey-list.survey-list-enter {
opacity: 0;
transform: translateX(200px);
}
.survey-list.survey-list-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 200ms;
}
.survey-list.survey-list-exit {
opacity: 1;
}
.survey-list.survey-list-exit-active {
opacity: 0;
transform: translateX(-200px);
transition: opacity 200ms;
}
And I'm not sure entirely the breadth of your intention, but you may also want to look into TransitionGroup, since it will automate adding classes to an array of children as they're toggled in and out:
https://reactcommunity.org/react-transition-group/transition-group
As a sidenote, if you're using BEM for your CSS, you shouldn't (i.e. surveyContainer--survey-list) be using a modifier as a block. Just allow survey-list to be its own block if it has its own elements. It prevents long confusing classes.