简介
在前端开发中，文本动画是一个常见的需求。为了创建出更加复杂和吸引人的文本动画，我们需要将文本进行拆分。这时候，SplitText 这个 npm 包就非常适合使用。SplitText 通过将一个元素的文字内容拆分成多个子元素，实现了更好的文本控制，使得我们可以针对每个字母、单词甚至是一行文本来应用 CSS 动画效果。
安装
在使用 SplitText 之前，需要确保 Node.js 和 npm 已经安装在本机上。安装 SplitText 相对简单：
npm install split-text
使用
使用 SplitText 的步骤相对简单，主要包括以下几个方面：
1. 引用 SplitText 包
在你的项目文件中，你需要先引用 SplitText：
import SplitText from 'split-text';
2. 新建 SplitText 实例
在需要拆分文本的元素上，新建一个 SplitText 实例:
const split = new SplitText('.text-container', { type: 'lines' });在这里，.text-container 是你需要拆分文本的元素，type 代表着 SplitText 的拆分类型。我们可以将 type 设置为 lines，words 或者 chars，代表着以行、单词或字符为拆分单位。
3. 使用 SplitText 实例
在创建了 SplitText 实例之后，你就可以使用它所提供的方法和属性来进行更精细的控制了。例如，我们可以获取每个拆分后的子元素：
const lines = split.lines; const words = split.words; const chars = split.chars;
我们也可以针对每个子元素来执行一些操作，例如加入动画类名：
chars.forEach(char => {
char.classList.add('animate');
});示例代码
以下是一个简单示例，展示了如何使用 SplitText 来拆分一段文本并添加动画效果：
-- -------------------- ---- -------
-------
--------------- ---- -
-------- -------------
---------- -----------------
-------- --
----------- --------- ---- ----- ------- ---- -----
-
-------- -
---------- --------------
-------- --
-
--------
---- -----------------------
--------- -----------
------
--------
------ --------- ---- -------------
----- ----- - --- ---------------------------- - ----- ------- ---
----- ----- - ------------
------------------ -- -
------------------------------
---
---------以上代码会将 "Hello World!" 拆分成每个字符，并在页面加载之后执行动画。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551ca81e8991b448cf2c7