Анимация div (вход и выход) в React

Question

Я хочу построить простую «карусель» в React. У меня есть список вопросов, на которые я хочу, чтобы пользователь ответил. Когда вы нажимаете next, отображается следующий вопрос. Я хочу также добавить кнопку previous в будущем. В настоящее время работает анимация для раскрываемого предмета.

Однако на мобильном экране экран прыгает вверх при его анимации от одного делителя к другому (с небольшой задержкой)

Высота parent div всегда одинаковатак почему же он прыгнул?

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/> и Button являются пользовательскими компонентами.

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);
  }
}

Как исправить прыжок? Кроме того, что может быть лучшим подходом для всего этого? Если я хочу добавить кнопку previous, переключение анимации будет кропотливой функцией.

Answer 1

Редактировать: для проблемы с прыжками попробуйте установить позицию родителя на relative, затем для дочернего контейнера:

.child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Я рекомендую ReactTransitionGroup: https://reactcommunity.org/react-transition-group/css-transition

Вашкод будет выглядеть примерно так:

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>

Тогда ваш 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;
}

И я не совсем уверен в широте ваших намерений, но вы также можете посмотреть наTransitionGroup, поскольку она будет автоматизировать добавление классов в массив дочерних элементов при их включении и отключении: https://reactcommunity.org/react-transition-group/transition-group

В качестве идентификатора, если вы используете BEM для своего CSS, вы не должны (т.е. surveyContainer--survey-list) использовать модификатор в качестве блока. Просто позвольте опросному листу быть его собственным блоком, если у него есть свои собственные элементы. Это предотвращает долгие запутанные занятия.