如何使用淡入淡出动画在图像之间进行更改React

Question

我想每 2 秒自动更改一次图像并淡入动画，但我的问题是当显示下一个图像时，上一个图像在显示下一个图像之前消失，因此使用我让每个图像完全消失的代码，显示显示下一页之前的页面背景。

我的目标是在下一张图像出现之前将上一张图像保留很短的时间，以避免显示页面的背景。

function hero() {

  const images = [
    '/public/Hero-image-1.jpg',
    '/public/Hero-image-2.jpg',
    '/public/Hero-image-3.jpg'
  ];

  const [currentIndexImage, setcurrentIndexImage] = React.useState(0);
  const [fade, setFade] = React.useState(false);

  React.useEffect(() => {

    const interval = setInterval(() => {

      setFade(false);


      setTimeout(() => {
        setcurrentIndexImage((prevIndex) => (prevIndex + 1) % images.length);
        setFade(true); 
        
      }, 1000);

    }, 2000);
  
    // Cleanup the interval on component unmount
    return () => clearInterval(interval);
  }, []);
  
  return (
    <>

          <div className="hero-img-container">

            <div className="hero-imgs">

            <img src={images[currentIndexImage]}  className={fade ? 'fade' : 'fade-out'}/>
              


            </div>
    </>


.fade {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
  
  .fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  

Answer 1

我明白了你遇到问题的地方。所以可以这样想，假设一个图像正在消失，其他图像应该同时开始出现。

那么为什么我们不在它上面放置另一张图像，然后一个图像开始淡出，同时其他图像开始淡入。

为了实现这一目标，我们必须使用状态来跟踪下一张图像。

我提供了下面的代码，希望它能有所帮助。

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const images = [
    'https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg',
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8k3sU7sIYgSOfu9rcTFvOsNc6JYcAzZRc2ptUA0iIJT4cBOI4sypyuiIVA8ChpwXWqJc&usqp=CAU',
 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8k3sU7sIYgSOfu9rcTFvOsNc6JYcAzZRc2ptUA0iIJT4cBOI4sypyuiIVA8ChpwXWqJc&usqp=CAU'

  ];

  const [currentIndexImage, setCurrentIndexImage] = useState(0);
  const [nextIndexImage, setNextIndexImage] = useState(1);
  const [fade, setFade] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setFade(false);

      setTimeout(() => {
        setCurrentIndexImage((prevIndex) => (prevIndex + 1) % images.length);
        setNextIndexImage((prevIndex) => (prevIndex + 2) % images.length);
        setFade(true);
      }, 500); 

    }, 2000);

 
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <div className="hero-img-container">
        <div className="hero-imgs">
          <img src={images[currentIndexImage]} className={fade ? 'fade-in' : 'fade-out'} />
          <img src={images[nextIndexImage]} className={fade ? 'fade-out' : 'fade-in'} style={{ position: 'absolute', top: 0, left: 0 }} />
        </div>
      </div>
    </>
  );
}

export default App;