在背景图像上创建淡入淡出 in/out 动画 change css in react

Question

我创建了一个图像列表，每 5 秒将显示为背景图像的图像更改为下一个。当从一个图像更改为另一个图像时，我希望图像被替换为在 0.2 秒内淡出，而图像显示在 0.2 秒内淡出。

这是我在我的组件中所做的：

export default function Login() {
  const Images = [ ...someImagesLinks ]
  const [position, setPosition] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      if (position === 3) setPosition(0);
      else setPosition(position + 1);
    }, 5000);
    return () => clearInterval(interval);
  }, [position]);

  return (
    <div className="loginPageContainer">
      <div
        style={{url("${Images[position].img}")`}}
        className="bg_images_login"
      >
      </div>
    </div>
  );
}

这是我的 css :

.bg_images_login {
  width: 100vw;
  height: 100vh;
  margin: 0;
 }

图像每 5 秒更改一次，但没有动画。我怎样才能用 CSS 解决这个问题？

Answer 1

将 CSS3 转换添加到您的 .bg_images_login class。

transition: background 0.2s linear;

Answer 2

如果您不介意添加更多依赖项，请查看以下内容： React Spring
这是直接 link 到 IMAGE FADE demo

在背景图像上创建淡入淡出 in/out 动画 change css in react

Create fade in/out animation on background images change css in react

css

background-image

css-animations

reactjs