简介

SplittingJS，是一个小型的 JavaScript 方法库，主要用来 按配置分割元素，例如 单词、字符、子节点、图片等。这个库本身不处理任何动画，仅做元素的拆分；开发者可以利用 JavaScript 或者 CSS 为元素创建动画。拆分后的内容大多数都是通过一系列 span 标签重新组合成原来的显示效果，并为每个 span 标签添加一个 索引属性作为 css 变量 --char-index。  

使用

1. 引入splitting.js文件，以及两个预设值的样式文件：

      splitting.css：包括许多额外的 CSS 变量和伪元素，有助于为高级动画提供动力，尤其是文本。

      splitting-cell.css：包含基于单元格/网格的效果的基本设置样式，需要浏览器支持 grid 布局。

2. HTML

<div data-splitting>ABC</div>

3. 调用

调用 Spliting() 方法之后，该节点会被拆分成：

<div data-splitting class="words chars splitting" style="--word-total:1; --char-total:3;">
  <span class="word" data-word="ABC" style="--word-index:0;">
    <span class="char" data-char="A" style="--char-index:0;">A</span>
    <span class="char" data-char="B" style="--char-index:1;">B</span>
    <span class="char" data-char="C" style="--char-index:2;">C</span>
  </span>
</div>

参数

SplitingJS 的 JavaScript 文件默认导出一个 Splitting 函数，该函数接收三个可选参数：

1.  target：可选的元素列表或者选择器，也可以是元素属性；默认是元素属性 [data-splitting]。

2.  by：需要使用的 拆分模式，默认是按字符进行拆分

3.  key：作为索引属性的前缀，本身默认是 --char-index，如果传递了一个前缀为 vue，则生成元素的索引属性会变为 --vue-char-index

相关地址

官网 ：https://splitting.js.org/guide.html

GitHub 地址 ：  https://github.com/shshaw/Splitting

演示地址 ：https://wow.techbrood.com/fiddle/40912