盖茨比图像之间的交叉淡入淡出

Question

使用gatsby-image，我正在使用setInterval()交换一些照片并更改src，如下所示：

componentDidMount() {
  this.setState({
    intervalFunction: setInterval(this.imageCycle, 10000),
  });
}

componentWillUnmount() {
    clearInterval(this.intervalFunction);
}

imageCycle() {
   let newImage = this.state.equiptmentCurrent + 1;
   if (newImage >= this.state.equiptmentImages.length) {
    newImage = 0;
   }
   this.setState(state => ({
     equiptmentCurrent: newImage,
   }));
}

渲染方法：

 <IMG
   sizes={this.state.equiptmentImages[this.state.equiptmentCurrent]}
   outerWrapperClassName="coverOuter"
   position="absolute"
   style={gatsbyImgStyle}
 />

有什么方法可以在源更改时对此进行转换？

Answer 1

这是一种可能的方法：

1. 通过qazxsw poi将两个标签叠加在一起
2. 用position: absolute调整它们的风格
3. 在this.state上放置一个新的transition: opacity 1s ease-in-out;属性。
4. 在componentDidMount间隔挂钩上： 更新未激活组件的下一个图像大小（通过状态obj）。 根据showFront的值，在每个组件上添加1和0（尊重）的不透明度。您可以有条件地添加一个类，如：showFront: true（对于底部图像反转）。在样式组件中，可以通过将showFront作为prop来传递。
5. 通过componentDidMount setInterval钩子切换showFront。