我正在开发一个为图像提供交替 src 值的轮播。这确实有效,但是我无法让 React CSSTransition 正常工作,因为从技术上讲,它是同一个元素,只是具有绑定(bind)到状态变量的不断变化的 src 值。
代码如下:
<CSSTransition
classNames="carousel"
in={true}
appear={true}
timeout={1000}
>
<img
src={this.state.imgLink}
key={this.state.imgLink}
/>
</CSSTransition>
非常感谢任何建议!
干杯, 加布
最佳答案
如果您在状态管理组件中,您可以使用 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>
))}
关于css - React CSSTransition 对于具有变化的 [src] 值的单个图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53772636/