Реагировать CSSTransition Для одного изображения с изменяющимся значением [src]?

Question

Я работаю над каруселью, которая обеспечивает чередующееся значение src для изображения. Это работает, однако я не могу заставить React CSSTransition работать, поскольку технически это тот же элемент, только с изменяющимся значением src, которое связано с переменной состояния.

Вот код:

<CSSTransition
  classNames="carousel"
  in={true}
  appear={true}
  timeout={1000}
>
  <img
    src={this.state.imgLink}
    key={this.state.imgLink}
  />
</CSSTransition>

Любые советы высоко ценится!

Ура, Гейб

Answer 1

Если вы находитесь в компоненте, управляемом государством, вы можете использовать switch переменная в вашем состоянии, чтобы сказать CSSTransition когда src атрибут меняется (помещая его на true) и затем положить его обратно false когда первый переход завершен ( с onEntered обратный звонок):

<CSSTransition
  classNames="carousel"
  in={this.state.changing}
  onEntered={()=> this.setState({switch:false})}
  appear={true}
  timeout={1000}
>
  <img
    src={this.state.imgLink}
    key={this.state.imgLink}
  />
</CSSTransition>

Это будет хорошо работать с эффектом затухания. Но так как ваш classNames называется карусель, я думаю, вы хотите иметь возможность перемещать изображения (например, один выход, а другой вход). Вы не сможете сделать это только с одним <img> пометить, но вы будете иметь по одному на изображение и размонтировать их при выходе (unmountOnExit опора) и управление ими с index переменная на state:

    {pictures.map((p, i) => (
      <CSSTransition
        key={p.id}
        in={i === this.state.index}
        classNames="carousel"
        timeout={1000}
      >
        <img
          src={p.url}
          className={i === this.state.index ? "fade-enter-done" : ""}
        />
      </CSSTransition>
    ))}

Answer 2

Возможно, это не официальный способ, но я обнаружил, что если вы обернете CssTransition с помощью TransitionGroup и переместите ключ из img в CssTransition, он будет работать так, как вы хотите. Анимация входа и выхода будет работать одновременно, что идеально подходит для одновременного ввода и вывода изображений, плавного перехода и т. Д.

<TransitionGroup component={null}>
  <CSSTransition classNames="carousel" timeout={1000} key={this.state.imgLink}>
    <img src={this.state.imgLink} />
  </CSSTransition>
</TransitionGroup>

Если вы хотите, чтобы одна анимация запускалась только после завершения другой, оберните ее SwitchTransition.

Переходные режимы. out-in: сначала происходит переход текущего элемента, затем, когда он завершен, происходит переход нового элемента. in-out: сначала происходит переход нового элемента, затем, когда завершается, текущий элемент перемещается.

тип: 'out-in'|'in-out' по умолчанию: 'out-in'

<SwitchTransition mode={"out-in"}>
  <CSSTransition classNames="carousel" timeout={1000} key={this.state.imgLink}>
    <img src={this.state.imgLink} />
  </CSSTransition>
</SwitchTransition>;