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

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

0 голосов
/ 14 декабря 2018

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

Вот код: 

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

Любой совет с благодарностью!

Ура, Гейб

Ответы [ 2 ]

0 голосов
/ 19 августа 2019

Это может быть не официальный способ, но я обнаружил, что если вы оберните 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>;
0 голосов
/ 30 марта 2019

Если вы находитесь в компоненте, управляемом состоянием, вы можете использовать переменную 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 prop ) и управлять ими с помощью переменной 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>
    ))}
...