javascript - 将 jQuery 动画转换为 React Hook

Question

我正在构建一个动画，其中两个单词的字母一个一个出现，类似于滑入效果。我有 jQuery 制作的代码，但我需要在我的 React 中实现它应用程序(用钩子(Hook)构建)。我拥有的代码获取文本，将其拆分为单个字母，并在这些字母之间添加跨度。这是我需要转换为 React 的以下代码:

const logoText = document.querySelector('.logo');
const stringText = logoText.textContent;
const splitText = stringText.split("");

for (let i=0; i < splitText.length; i++) {
     text.innerHTML += "<span>" + splitText + "</span>" 
}

let char = 0;
let timer = setInterval(onTick, 50)

我想知道你们能不能帮我弄清楚。非常感谢!

Answer 1

您需要遍历文本并为每个具有不同执行时间的字母创建一个超时函数，这样您就可以看到您期望的幻灯片效果:
定制 Hook

const useSlideInText = text => {
  const [slide, setSlide] = useState([]);
  useEffect(() => {
    Array.from(text).forEach((char, index) => {
      const timeout = setTimeout(
        () =>
          setSlide(prev => (
            <>
              {prev}
              <span>{char}</span>
            </>
          )),
        index * 100
      );
    });
  }, []);

  return slide;
};

用法

 function App() {
    const slide = useSlideInText("hello");
    return (
      <div>
        {slide}
      </div>
    );
 }

Working example