如何解决React图片切换时的白色闪烁，实现同步淡入淡出？

我希望当前图片淡出的同时下一张图片淡入（如上方第二张动图所示），中间无白色闪烁。我认为这与JavaScript有关，但无法定位问题所在，恳请给出解决建议？

组件代码 #

const ImageSlider = ({ slides }) => {
  const [current, setCurrent] = useState(0);
  const length = slides.length;

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };

  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

  if (!Array.isArray(slides) || slides.length <= 0) {
    return null;
  }

  return (
    <section className="slider">
      <FaArrowAltCircleLeft className="left-arrow" onClick={prevSlide} />
      {SliderData.map((slide, index) => {
        return (
          <div
            className={index === current ? "slide active" : "slide"}
            key={slide.id}
          >
            {index === current && (
              <img src={slide.img} alt="" className="image" />
            )}
          </div>
        );
      })}
      <FaArrowAltCircleRight className="right-arrow" onClick={nextSlide} />
    </section>
  );
};

export default ImageSlider;

CSS代码 #

.slider {
  position: relative;
  height: 90vh;
}

.image {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 200ms opacity ease-in-out;
  transition-delay: 200ms;
}

.slide.active {
  opacity: 1;
  z-index: 1;
  transition-delay: 0ms;
}
.slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

解决方法 #

1. 移除图片的条件渲染 #

你现在只渲染当前激活状态的图片，切换时旧图会被卸载、新图才开始加载，中间必然出现空白闪烁。删掉条件判断，让所有图片提前渲染，靠slide容器的透明度控制显示：

修改组件里的图片渲染部分：

{SliderData.map((slide, index) => {
  return (
    <div
      className={index === current ? "slide active" : "slide"}
      key={slide.id}
    >
      <img src={slide.img} alt="" className="image" /> {/* 移除`index === current &&`判断 */}
    </div>
  );
})}

2. 调整CSS过渡逻辑 #

原来的transition-delay设置会导致新旧图片过渡不同步——旧图要等200ms才开始淡出，新图立刻淡入，中间出现空隙。调整成同步过渡：

.slider {
  position: relative;
  height: 90vh;
  overflow: hidden; /* 防止图片溢出容器 */
}

.image {
  width: 100%; /* 改用100%适配容器，避免vw导致的溢出问题 */
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms ease-in-out; /* 统一过渡时长，去掉延迟 */
  z-index: 1; /* 默认层级1 */
}

.slide.active {
  opacity: 1;
  z-index: 2; /* 激活的slide层级更高，显示在最上层 */
}

3. 额外优化（可选） #

如果担心图片加载慢导致首次切换闪烁，可以在组件挂载时提前预加载所有图片：

useEffect(() => {
  slides.forEach(slide => {
    const img = new Image();
    img.src = slide.img;
  });
}, [slides]);

这样修改后，就能实现像第二张动图那样的无缝淡入淡出效果，不会出现白色闪烁。

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