Блог

Главная - Вопросы по программированию - Анимация попутного ветра nextjs: эффект затухания изображения запускается только в первый раз, а затем останавливается

Анимация попутного ветра nextjs: эффект затухания изображения запускается только в первый раз, а затем останавливается

#reactjs #next.js #tailwind-css

Вопрос:

Я пытаюсь создать плавный переход изображения (затухание) от одного изображения к другому для массива изображений, импортированных напрямую (т. Е. 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>
  )
...

Вращение изображения работает, но я замечаю, что анимация работает только при первом подключении компонента. После этого все время происходят резкие переходы. Как мне сделать так, чтобы каждое изображение всегда исчезало?

Комментарии:

1. попробуйте менять клавишу при div каждом запуске анимации

2. Умно — это действительно работает! Мне трудно поверить, что нет менее хакерского решения (хотя само требование немного банально). Если вы хотите оставить свое предложение в качестве ответа, с радостью примете его!

Метки: ,