在 Next.js 中添加打字机效果

在网页设计中，打字机效果可以让文本逐个字地呈现，营造出一种悬念和动态的氛围。本文将介绍如何在 Next.js 中添加打字机效果。

使用 onMounted 钩子实现打字机效果

在 Vue 中，我们可以使用 onMounted 钩子实现打字机效果。在 Next.js 中，我们也可以借助 React Hooks 把这一特性实现出来。

import React, { useState, useEffect } from "react";

const Typewriter = ({ text }) => {
  const [words, setWords] = useState([]);
  const [currentWord, setCurrentWord] = useState("");
  const [finalText, setFinalText] = useState("");

  useEffect(() => {
    setWords(text.split(" "));
    setCurrentWord(words[0]);
    let i = 0;
    const interval = setInterval(() => {
      if (i < words.length - 1) {
        setCurrentWord(words[i]);
        setFinalText((prevText) => prevText + " " + words[i]);
        i += 1;
      } else {
        clearInterval(interval);
      }
    }, 200);
  }, []);

  return <p>{finalText + " " + currentWord}</p>;
};

export default Typewriter;

我们创建了一个名为 Typewriter 的组件，组件接受一个 text 属性，表示要显示的文本。在组件内部，我们使用了 useState 创建了三个状态变量，其中 words 表示文本被拆分后的每个单词，currentWord 表示当前应该显示的单词，finalText 表示已经显示出来的文本。

在 useEffect 钩子中，我们初始化了状态变量，生成动画效果的核心部分是 setInterval 函数，它每隔 200 毫秒向 finalText 添加一个单词，并将 currentWord 的值设置为当前应该显示的单词。当所有单词都被显示完成后，我们清除 setInterval。

最后，在组件的 render 函数中，我们返回了一个 p 标签来呈现打字机效果。

使用 CSS 动画实现打字机效果

除了使用 JavaScript，我们还可以使用 CSS 动画实现打字机效果。这种方法比 JavaScript 更佳优雅，实现起来也更加简单。

import styles from "./Typewriter.module.css";

const Typewriter = ({ text }) => {
  return (
    <div className={styles.typewriter}>
      <h1>{text}</h1>
    </div>
  );
};

export default Typewriter;

在组件内部，我们返回了一个 div 标签，并使用了一个名为 typewriter 的 CSS 类来应用样式。

.typewriter h1 {
  animation: type 4s steps(50, end), blink 0.8s step-end infinite;
  white-space: nowrap;
  font-size: 2rem;
  overflow: hidden;
  border-right: 2px solid;
}

@keyframes type {
  from {
    width: 0;
  }
}

@keyframes blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #333;
  }
}

我们定义了一个名为 type 的关键帧动画，使得 h1 标签的宽度从 0 慢慢增加到恰好能够包含所有文本，实现逐字显示的效果。我们还定义了一个名为 blink 的关键帧动画，让光标在文本显示完成后不断地闪烁。同样需要注意的是，组件样式是使用 CSS 模块化来实现的，需要引入对应的样式文件。

总结

在本文中，我们介绍了两种在 Next.js 中添加打字机效果的方法，分别是使用 JavaScript 和使用 CSS 动画。两种方法各有千秋，开发者可以据此选择适合自己项目的方案。