反应背景图像变化动画答案

【问题标题】：React Background Image Change Animation反应背景图像变化动画
【发布时间】：2023-02-19 11:16:25
【问题描述】：

我正在使用 ReactJS 开发一个天气应用程序，我想要做的是为我的背景制作一张图片幻灯片，这些图片将全屏显示，从一个到另一个淡入淡出并进行一些移动。

到目前为止，我所做的是使用 useRef 挂钩和 setInterval 成功更改我的背景图像，将不同的类添加到当前幻灯片。我还为图像不透明度添加了一个关键帧动画。

图片本身都包含在它自己的组件<Background /> 中，使用 z-index 作为主要内容的优先级较低。

这种方法是最佳实践吗？不理想的是，如果我决定更改 setInterval 的时间量，我将不得不转到我的 css 文件来更改动画时间。将它作为一个组件本身也是一个好主意吗？

如果有人对背景有任何提示或改进，请与我们联系。谢谢。

可以在这里找到一个例子：

https://codesandbox.io/s/background-example-4ffelz?file=/src/Background

这是我的背景组件和背景 css 文件。

背景.js

import { useState, useRef, useEffect } from "react";
import img1 from "../images/clouds.jpg";
import img2 from "../images/clouds2.jpg";
import img3 from "../images/sun.jpg";
import img4 from "../images/wind.jpg";
import "../Background.css";
const Background = () => {
  const images = [img1, img2, img3, img4];
  const [currentSlide, setCurrentSlide] = useState(0);
  // useRef does not cause a re-render
  let sliderInterval = useRef();
  let switchImages = () => {
    if (currentSlide < images.length - 1) {
      setCurrentSlide(currentSlide + 1);
    } else {
      setCurrentSlide(0);
    }
  };
  useEffect(() => {
    sliderInterval = setInterval(() => {
      switchImages();
    }, 5000);
    return () => {
      clearInterval(sliderInterval);
    };
  });
  return (
    <div className="imgWrapper">
      {images.map((img, index) => {
        return (
          <img
            src={img}
            className={
              index === currentSlide ? "imageActive homeImage" : "image"
            }
          />
        );
      })}
    </div>
  );
};

export default Background;

背景.css

.home-img {
  max-width: 100%;
}
.image {
  display: none;
}
.imgWrapper {
  width: 100vw;
  height: 100vh;
}
@keyframes blender {
  0% {
    opacity: 0;
    transform: translate(-25px);
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-10px);
  }
}
.imageActive {
  float: left;
  width: 150vw;
  height: 100vh;
  object-fit: cover;
  box-sizing: border-box;
  opacity: 0;
  animation: blender 5s linear 50ms;
}

【问题讨论】：

标签： javascript css reactjs background css-animations

【解决方案1】：

这个website可以帮助你找到最好的过渡动画

【讨论】：

【解决方案2】：

您的解决方案非常适合移动背景。它非常有用，因为我正在寻找解决这个问题的反应（而不是反应本机）。

【讨论】：