Reactjs 基于 ReactNextJS Timer 的文本淡入淡出不起作用

我是比较新的react 和NextJS.我已经花了整整8个小时和相当多的研究试图弄清楚这一点，但没有运气！

我正在try 设置一个组件，它从数组中随机选取一个单词，淡入，然后在一段延迟后淡出，淡入一个新词.

在整理了我自己的几个失败的解决方案后，我找到了一个教程，并try 了他们的代码(经过一些修改，将其从TS转换到JS)，但它仍然不起作用.

我可以很容易地让文本在计时器上更改，但不能更改褪色.

有什么主意吗？

使用基于StackBlitz的基本NextJS设置构建的NextJS 13

Index.js

import { useEffect, useState } from 'react';
import styles from './Index.module.css';

const FADE_INTERVAL_MS = 2000;
const WORD_CHANGE_INTERVAL_MS = FADE_INTERVAL_MS * 2;
const WORDS_TO_ANIMATE = [
  'Hello',
  'Ciao',
  'Jambo',
  'Bonjour',
  'Salut',
  'Hola',
  'Nǐ hǎo',
  'Hallo',
  'Hej',
  '??',
];

export default function AnimatedText() {
  const [fadeProp, setFadeProp] = useState('fadeout');
  const [wordOrder, setWordOrder] = useState(0);

  useEffect(() => {
    const fadeTimeout = setInterval(() => {
      fadeProp === 'fadein' ? setFadeProp('fadeout') : setFadeProp('fadein');
    }, FADE_INTERVAL_MS);

    return () => clearInterval(fadeTimeout);
  }, [fadeProp]);

  useEffect(() => {
    const wordTimeout = setInterval(() => {
      setWordOrder(
        (prevWordOrder) => (prevWordOrder + 1) % WORDS_TO_ANIMATE.length
      );
    }, WORD_CHANGE_INTERVAL_MS);

    return () => clearInterval(wordTimeout);
  }, []);

  return (
    <h2 className={styles.white}>
      <span className={`styles.${fadeProp}`}>
        {WORDS_TO_ANIMATE[wordOrder]}
      </span>
      , I'm bleh.
    </h2>
  );
}

Index.module.css

.fadein {
  animation: fadein 0.3s;
  -moz-animation: fadein 0.3s;
  -webkit-animation: fadein 0.3s;
  -o-animation: fadein 0.3s;
}

.fadein {
  animation: fadeout 0.3s;
  -moz-animation: fadeout 0.3s;
  -webkit-animation: fadeout 0.3s;
  -o-animation: fadeout 0.3s;
}

.white {
  color: silver;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
    color: blue;
  }
  100% {
    opacity: 0;
    color: red;
  }
}