Question

我正在研究一种轮播，该轮播为图像提供交替的src值。确实可以，但是我无法使React CSSTransition正常工作，因为从技术上讲，它是相同的元素，只是绑定到状态变量的src值不断变化。

代码如下：

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

任何建议都将不胜感激！

干杯，加布（Gabe）

Answer 1

如果您处于状态管理的组件，则可以在状态下使用switch变量来通知CSSTransition src属性何时更改（通过将其放在{{1 }}），然后在完成第一次转换（with a onEntered callback）后将其放回true：

false

这将起到很好的褪色效果。但是由于您的<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标签来做到这一点，但可以通过在每个图像上添加一个标签并在退出（unmountOnExit prop）上卸载它们，并使用<img>变量来管理它们。 index：

state

Answer 2

这可能不是官方的方法，但是我发现，如果用TransitionGroup包装CssTransition并将密钥从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：新元素先移入，然后完成，当前元素移出。

类型：“从里到外” |“从里到外” 默认值：“出入”

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

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

2 个答案: