Как сделать переход CSS правило при изменении img src

Question

Я создаю свое приложение React и создаю карусель изображений, используя setInterval, который меняет img src каждые 2 секунды.

Теперь я хотел бы анимировать изменение img с помощью перехода.(CSSTransitionGroup мне неясен).

Однако у меня есть проблема с прикреплением перехода к любому измеряемому элементу.Могу ли я как-то "захватить" событие изменения источника setInterval с помощью css?

До сих пор я пытался добавить стиль "непрозрачность: 1" к изображениям, установленным в непрозрачность: 0, но непрозрачность: 1 остается beyonodкаждая итерация интервала, таким образом, только первое изображение получает переход, и новые по умолчанию имеют стиль "opacity: 1".

Я говорю о разделе "NavLink to =" / about_us ">"

Вот мой код.Есть идеи?Я потратил 5 часов на это:

import React, {
  Component
} from 'react';
import {
  NavLink
} from "react-router-dom";




class Radzikowskiego_S2_Staff extends Component {
  constructor(props) {
    super(props);
    this.state = {
      spanText: 'Zabawy',
      text: ["Rozwoju", "Odpoczynku", "Śmiechu", "Zabawy"],
      staffImg: "Aleksandra_Brozyna",
      staff: ["Dominika_Serwa", "Dorota_Szastak", "Joanna_Wozniak", "Alicja_Kwasny", "Kinga_Kaczmarek", "Monika_Garula", "Maria_Kaczmarek", "Natalia_Kiczura", "Violetta_Wojas"],
      index: 0,
      indexStaff: 0,


    }
  }

  componentDidMount() {
    this.changeSpan();
    this.changeStaff();
  }


  changeSpan = () => {

    this.interval = setInterval(() => {

      this.setState({
        spanText: this.state.text[this.state.index],
        index: this.state.index >= this.state.text.length - 1 ? 0 : this.state.index + 1
      });

    }, 2000);

  };


  changeStaff = () => {

    this.interval = setInterval(() => {

      this.setState({
        staffImg: this.state.staff[this.state.indexStaff],
        indexStaff: this.state.indexStaff >= this.state.staff.length - 1 ? 0 : this.state.indexStaff + 1,

      });
    }, 2000);


  };

  showImg = () => {

    // console.log(event.target.style.opacity='0.5');
    // console.log(this.refs.img_src.style.opacity='1')

    this.refs.img_src.classList.add('show_images')
  };



  componentWillUpdate() {
    this.showImg();
    this.removeImg();
  }

  removeImg = () => {

    // console.log(event.target.style.opacity='0.5');
    // console.log(this.refs.img_src.style.opacity='1')
    // console.log(this.refs.img_src.classList)
    this.refs.img_src.classList.remove('show_images')
  };



  render() {


    return (

      <
      div id = 'staff' >


      <
      div className = 'row' >

      <
      div className = 'col-12 text-center mb-3' >


      <
      h3 > Krakowiaczek to miejsce do </h3> <
        h6 id = "staff_span"
      className = "animate_span" > {
        this.state.spanText
      } < /h6> <
      h6 class = "mt-3" > W Przedszkolu Krakowiaczek nie ma czasu na nudę. < /h6>

      <
      /div> <
      /div>


      <
      div class = 'row align-items-center ' >
      <
      div className = 'col-md-2 col-md-offset-1  section_2_thumbnail' >
      <
      NavLink to = "/our_philosophy" >
      <
      img src = 'images/filozofia.svg'
      className = 'section_2_thumbnail_img' / >
      <
      p class = "pt-2" > Nasza Filozofia < /p> <
      /NavLink> <
      /div> <
      div className = 'col-md-2 col-md-offset-1 section_2_thumbnail' >
      <
      NavLink to = "/extended_offer" >
      <
      img src = 'images/what_we_offer.svg'
      className = 'section_2_thumbnail_img' / >
      <
      p className = "pt-2" > Co oferujemy < /p> <
      /NavLink> <
      /div> <
      div className = 'col-md-2 col-md-offset-1 section_2_thumbnail' >
      <
      NavLink to = "/enrollment" >
      <
      img src = 'images/zapisy.svg'
      className = 'section_2_thumbnail_img' / >
      <
      p className = "pt-2" > Zapisy < /p> <
      /NavLink> <
      /div>


      <
      div className = 'col-md-3 col-md-offset-1 section_2_thumbnail' >
      <
      NavLink to = "/about_us" >
      <
      img src = {
        `images/teachers/${this.state.staffImg}.jpg`
      }
      className = 'section_2_thumbnail_staff pb-2'
      id = 'staffIcon'
      onLoad = {
        this.showImg
      }
      ref = 'img_src' / >
      <
      p className = "mt-2 mb-3" > Kadra < /p> <
      /NavLink> <
      /div> <
      /div>

      <
      /div>

    )
  }
}

export default Radzikowskiego_S2_Staff;

Answer 1

Хорошо, я использовал функцию кроссфейдера, чтобы решить проблему.Я использовал map для рендеринга всех img srcs из массива, а затем использовал анимацию для генерации сдвига изображения.

Я думаю, что я включу какой-то цикл sass, чтобы упростить scss, как только я сделаю какой-то рефакторинг, хотя небольшой совет будет неплохим

 <div class="staff_img_wrapper">

                            {
                                this.state.staff.map(element => {

                                  return (
                                   <img src={`images/teachers/${element}.jpg`} className='section_2_thumbnail_staff pb-2' id='staffIcon' />
                                  )
                                })

                            }
                        </div>

CSS

 .staff_img_wrapper {
     height: 20vh;

      img:nth-child(1) {
    position: absolute;
    opacity: 1;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: fadeOut 3s;
    animation-fill-mode: forwards;
    z-index:10;
  }

  img:nth-child(2) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    animation: fadeOut 3s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    z-index: 9;
  }

  img:nth-child(3) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    animation: fadeOut 3s;
    animation-delay: 6s;
    animation-fill-mode: forwards;
    z-index: 8;
  }

  img:nth-child(4) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    animation: fadeOut 3s;
    animation-delay: 9s;
    animation-fill-mode: forwards;
    z-index: 7;
  }


  img:nth-child(5) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    animation: fadeOut 3s;
    animation-delay: 12s;
    animation-fill-mode: forwards;
    z-index: 6;
  }

  img:nth-child(5) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    animation: fadeOut 3s;
    animation-delay: 15s;
    animation-fill-mode: forwards;
    z-index: 5;
  }


  img:nth-child(6) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    animation: fadeOut 3s;
    animation-delay: 18s;
    animation-fill-mode: forwards;
    z-index: 4;
  }

  img:nth-child(7) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    animation: fadeOut 3s;
    animation-delay: 21s;
    animation-fill-mode: forwards;
    z-index: 3;
  }

  img:nth-child(8) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    animation: fadeOut 3s;
    animation-delay: 24s;
    animation-fill-mode: forwards;
    z-index: 2;
  }

  img:nth-child(9) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    animation: fadeOut 3s;
    animation-delay: 27s;
    animation-fill-mode: forwards;
    z-index: 1;
  }
  img:nth-child(10) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    animation: fadeOut 3s;
    animation-delay: 30s;
    animation-fill-mode: forwards;
    z-index: 0;
  }
}


@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0
  }
}