【React】APIから取得した画像データの変更時にフェードイン/アウトさせたい

Question

実装中のアプリ
TMDbから映画データを取得し表示するサイト

実現したいこと
ヘッダー部分に表示している映画データをsetIntervalにてランダムで取得している．
その際に，データが切り替わる際のアニメーションをつけたい．

以下，実装中のコードです

//データ取得部分

useEffect(() => {
    async function fetchData() {
      const request = await axios.get(requests.feachNetflixOriginals)

      setMovie(
        request.data.results[
          Math.floor(Math.random() * request.data.results.length)
        ],
      )
      return request
    }
    setInterval(fetchData,10000)
  }, [])

//表示部分

    <header
      className="Banner"
      style={{
        backgroundSize: 'cover',
        backgroundImage: `url("https://image.tmdb.org/t/p/original${movie?.backdrop_path}")`,
        backgroundPosition: 'center center',
      }}
    >

コードは省略している部分も多いので必要な項目があれば追記します．

Comments

[hoshi-takanori]

元の画像と新しい画像を重ねて表示して、CSS アニメーションでフェードイン・アウトさせればよいのでは。

[asasaas]

フェードのタイミングをどこで定義するかが少し見えません．

[hoshi-takanori]

やってみたら結構難しかったのでライブラリ化してみました。
https://www.npmjs.com/package/react-crossfade-img