React图片自动淡入切换：解决切换时页面背景露出问题

问题说明 #

想要实现每2秒自动切换图片并带有淡入动画，但当前代码切换时前一张图片会完全消失，导致页面背景露出。目标是让前一张图片在新图片出现前短暂保留，避免背景暴露。

原代码问题分析 #

原方案仅渲染单张图片，切换流程为：当前图淡出→更新图片索引→新图淡入。在淡出和新图淡入的间隙，容器内无可见图片，因此会露出页面背景。

修正方案 #

核心思路是同时渲染两张图片（当前图和下一张图），让它们重叠在容器内。切换时，当前图淡出的同时下一张图同步淡入，两张图的过渡动画重叠，完全避免空白期。

修改后的组件代码 #

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

  const [currentIndex, setCurrentIndex] = React.useState(0);
  const [isTransitioning, setIsTransitioning] = React.useState(false);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setIsTransitioning(true);
      setTimeout(() => {
        setCurrentIndex(prev => (prev + 1) % images.length);
        setIsTransitioning(false);
      }, 500);
    }, 2000);

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

  const nextIndex = (currentIndex + 1) % images.length;

  return (
    <div className="hero-img-container">
      <div className="hero-imgs">
        <img
          src={images[currentIndex]}
          className={`slide-image ${isTransitioning ? 'fade-out' : 'fade-in'}`}
          alt="Hero slide"
        />
        <img
          src={images[nextIndex]}
          className={`slide-image ${isTransitioning ? 'fade-in' : 'fade-out'}`}
          alt="Hero slide"
        />
      </div>
    </div>
  );
}

对应的CSS样式 #

.hero-img-container {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.hero-imgs {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
}

.fade-in {
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

关键改进点 #

• 两张图片通过绝对定位重叠，容器内始终有可见图片
• 过渡动画同步执行，当前图淡出与下一张图淡入无缝衔接
• 定时器延迟时长与CSS过渡时长保持一致，确保状态切换时机准确

内容的提问来源于stack exchange，提问作者Huzaifa Zahid