0

Here is my Transition component:

 <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>

The GameQuestions component which is animated here depends on a setState action which is delayed for lets say 1s. What I would like to achieve here is that the whole CSSTransition starts after 1s, not immediately like it is now.

Here is my css for the slide:

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

Appreciate your help!

maaajo
  • 839
  • 6
  • 10
  • Does this answer your question? [How to use a different delay for each item with React transition group?](https://stackoverflow.com/questions/49985915/how-to-use-a-different-delay-for-each-item-with-react-transition-group) – Józef Podlecki May 30 '20 at 12:14
  • Unfortunately not. Even when I tried to apply suggestions from there the transition starts immediately although the state didn't change yet – maaajo May 30 '20 at 12:26

0 Answers0