为什么动画只适用于第一张幻灯片而不适用于其他幻灯片？

Question

我正在尝试使用反应钩子制作一个带有淡入淡出动画的简单幻灯片。但我的动画仅适用于第一张幻灯片，不适用于其他幻灯片。

这是功能代码：

import React, { useEffect, useRef, useState } from "react";
import './Homepage.css';

const Homepage = () => { 

  const slides = [
    "../../backgroundImages/1a.jpg",
    "../../backgroundImages/1b.jpg",
    "../../backgroundImages/1.jpg"
  ]; 
  
  const playRef = useRef<any>(null);

  const [slideIndex, setSlideIndex] = useState<number>(0);

  useEffect(() => {
    playRef.current = nextSlide;    
  }); 

  useEffect(() => {
    const play = setInterval(() => {      
      playRef.current();      
    }, 3000);
    
    return () => {
      clearInterval(play);
    }    
  }, []);  

  const nextSlide = () => {    
    slideIndex >= slides.length -1 
      ? setSlideIndex(0) 
      : setSlideIndex((slideIndex) => slideIndex + 1);
  }  

  return(       
    <img alt='background' src={slides[slideIndex]}
          className='homepage-background-div'
    />
  );
}
export default Homepage;

这是css：

.homepage-background-div {
  position: absolute;  
  top: 0;
  height: 100vh;
  width: 100vw;   
  z-index: -1;
  animation: fadein 2s;
}  
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

我在 stackoverflow 以及许多其他文章和教程上对类似问题有红色答案，但无法解决问题。任何帮助都将受到欢迎。

Answer 1

将key={slides[slideIndex]}添加到标签img

<img
  alt="background"
  key={slides[slideIndex]}
  src={slides[slideIndex]}
  className="homepage-background-div"
/>