Вот мой компонент 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;
}
Оцените ваше помогите!