Задержка выполнения response-transition-group - PullRequest
0 голосов
/ 30 мая 2020

Вот мой компонент Transition:

 <TransitionGroup>
   <CSSTransition key={uuidv4()} timeout={1000} classNames="slide">
     <GameQuestions
       gameOption={this.props.option}
       answers={this.state.answers}
       questionName={this.answer.name}
       handleUserAnswer={this.handleUserAnswer}
     />
   </CSSTransition>
</TransitionGroup>

Анимированный здесь компонент GameQuestions зависит от действия setState, которое задерживается, скажем, на 1 с. Я хотел бы здесь добиться, чтобы весь CSSTransition начинался через 1 с, а не сразу, как сейчас.

Вот мой css для слайда:

.slide-enter {
  opacity: 0;
  transform: scale(0.97);
  z-index: 1;
}

.slide-enter.slide-enter-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 300ms linear 1000ms, transform 300ms ease-in-out 1100ms;
}

.slide-exit {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.slide-exit.slide-exit-active {
  opacity: 0;
  transform: scale(0.97) translateY(5px);
  transition: opacity 150ms linear 1000ms, transform 150ms ease-out 1000ms;
}

.slide-exit-done {
  opacity: 0;
}

Оцените ваше помогите!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...