css - React CSSTransition 对于具有变化的 [src] 值的单个图像？

Question

我正在开发一个为图像提供交替 src 值的轮播。这确实有效，但是我无法让 React CSSTransition 正常工作，因为从技术上讲，它是同一个元素，只是具有绑定(bind)到状态变量的不断变化的 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当第一个转换完成时(with a onEntered callback):

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