css - 如何在 img src 上更改过渡 CSS 规则

Question

我正在制作我的 React 应用程序，并使用 setInterval 制作了一个图像轮播，它每 2 秒更改一次 img src。

现在我想使用过渡动画来动画 img 的变化。（CSSTransitionGroup 我不清楚）。

但是，我在将过渡附加到任何可测量元素时遇到问题。我可以使用 css 以某种方式“获取”setInterval 源更改事件吗？

到目前为止，我已经尝试向设置为 opacity: 0 的图像添加“opacity: 1”样式，但 opacity: 1 保持超出间隔的每次迭代，因此只有第一个图像得到过渡，而新图像具有“不透明度：默认为 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;

标签： cssreactjstransitionintervals

Answer 1

好的，我使用交叉淡入淡出功能来解决问题。我使用 map 来渲染数组中的所有 img src，然后使用动画来生成图像移位。

我想一旦我做了一些重构，我会加入某种 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
  }
}