如何在React.js中动态实现图片交叉淡入淡出效果？

以下是完整的App.js代码实现：

导入依赖 #

import React, { useState, useEffect } from "react";
import "./App.css";
import CrossfadeImage from "react-crossfade-image";

组件与状态定义 #

export default function App() {
  const [curImg, setCurImg] = useState(0);

定义图片列表 #

const images = [
    "http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg",
    "http://is2.mzstatic.com/image/thumb/Purple122/v4/d2/36/28/d23628e5-c9bf-d0fb-104f-61fa52976ff5/source/175x175bb.jpg",
  ];

实现定时切换逻辑 #

通过useEffect钩子设置定时器，每隔3秒切换当前显示的图片索引，实现循环切换效果：

useEffect(() => {
    let interval = null;

    interval = setInterval(() => {
      if (curImg < 1) {
        setCurImg(img => img + 1);
      } else {
        setCurImg(0);
      }
    }, 3000);

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

渲染交叉淡入淡出组件 #

使用react-crossfade-image提供的CrossfadeImage组件，传入当前图片地址及动画参数：

return (
    <div className="App">
      <CrossfadeImage
        src={images[curImg]}
        duration={1000}
        delay={200}
        timingFunction="ease-out"
      />
    </div>
  );
}

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