реакция-переходная группа не анимируется при смене элемента - PullRequest
Новая
       50

реакция-переходная группа не анимируется при смене элемента

0 голосов
/ 23 июня 2019

Так что мне просто нужен простой переход с постепенным исчезновением, у меня есть этот код внутри моего <Quote/> компонента: 

     <TransitionGroup className="example">
        <CSSTransition
          key={2}
          classNames="example"
          timeout={{ enter: 500, exit: 300 }}
        >
          <span>{this.props.quote}</span>
        </CSSTransition>
      </TransitionGroup>

Теперь {this.props.quote} - это изменяющийся текст с <Quote quote={this.state.quote}/>

Каждый раз, когда я нажимаю следующую кнопку, генерируется новый <Quote/>, и работает генератор цитат работает, а текст меняется.

Также мойcss: 

.example-enter {
  opacity: 0;
  transition: 0.3s all ease;
}
.example-enter-active {
  opacity: 1;
  transition: 0.3s all ease;
}

.example-exit {
  opacity: 1;
  transition: 0.3s all ease;
}
.example-exit-active {
  opacity: 0;
  transition: 0.3s all ease;
}

Текст меняется , но анимация отсутствует,: (.

...