reactjs - Tailwindcss 动画 + nextjs：图像淡入效果仅第一次运行然后停止

Question

我正在尝试创建从一个图像到另一个图像的平滑图像过渡（淡入），用于将一组图像直接（即import img1 from './picture-1.jpg'等）导入到我的 nextjs 组件中。该组件应该是一个大图像横幅。我希望它自动交换图像。

到目前为止我所拥有的大部分工作的片段：

...
...
  useInterval(nextImage, 5000)

  const bgImage = `url(${images[index]})`

  return (
    <div
      className="animate-slowfadein w-full bg-cover bg-center h-80"
      style={{ backgroundImage: bgImage }}
    ></div>
  )
...

图像旋转工作正常，但我注意到动画仅在组件第一次安装时工作。在那之后，它一直是突然的过渡。如何让每张图像始终淡入？

标签： reactjsnext.jstailwind-css