Перекрестное изображение между изображениями Гэтсби

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. Сложите две метки поверх друг друга через position: absolute
2. Скомбинируйте их с transition: opacity 1s ease-in-out;
3. Поместите новое свойство showFront: true в this.state.
4. На хуке интервала componentDidMount:
   1. Обновить следующие размеры изображений (через состояние obj) для компонента, который не активен.
   2. Добавьте непрозрачность 1 и 0 (соответственно) для каждого компонента в зависимости от значения showFront. Вы можете условно добавить новый класс с чем-то вроде: className={"my-image-class " + (this.state.showFront ? 'seen' : 'not-seen')} (и наоборот для нижнего изображения). В styled-components это можно сделать, передавая showFront в качестве реквизита.
5. Переключение showFront с помощью хука componentDidMount setInterval.