lines

定义是否以及如何拆分行。
拆分的行元素可以通过 TextSplit 实例的 lines 属性返回的数组来访问。

const { lines } = splitText(target, { lines: true });

默认分割封装器

默认情况下，每一行都被封装在一个带有以下样式和数据属性的 span 元素中：

<span style="display: block;" data-line="0">This is the first line</span>
<span style="display: block;" data-line="1">This is the second line</span>
<span style="display: block;" data-line="2">This is the third line</span>

自定义拆分封装器

可以通过传递一个包含拆分参数的对象，或者通过传递一个自定义的 HTML 模板 字符串来配置拆分封装器。

拆分嵌套元素

当需要时，嵌套元素会在各行中重复。例如，以下 HTML：

<p>
  This is a text <a href="#link">with a link 
  that contains a nested <em>em 
  element</em></a>
</p>

分割后得到以下结构（为清晰起见省略CSS样式）：

<p>
  <span>This is a text <a href="#link">with a link</a></span>
  <span><a href="#link">that contains a nested <em>em</em></a></span>
  <span><a href="#link"><em>element</em></a></span>
</p>

字体加载和行大小调整处理

为了防止不正确的行计算，行会在所有字体加载和布局操作完成后通过等待 document.fonts.ready.then 承诺完成来拆分。
然后，如果目标元素调整大小，行会自动重新拆分，在此过程中覆盖现有的行、单词和字符元素。

按行拆分时对线条、单词和字符进行动画处理

每行拆分会覆盖现有的拆分元素，这会导致字体加载完成后或每次文本元素调整大小时正在运行的拆分元素动画停止。
在 split.addEffect() 方法中声明动画，可以确保在调整大小之间持续播放，并在使用 split.revert()时自动恢复。

const split = splitText(target, params);

split.addEffect(({ lines, words, chars }) => animate([lines, words, chars], {
  opacity: { from: 0 },
}));

split.revert(); // This also reverts the animation declared with addEffect

接受

Boolean
Object of Split parameters
HTML template String

默认

false

代码示例行

import { animate, splitText, stagger } from 'animejs';

splitText('p', {
  lines: { wrap: 'clip' },
})
.addEffect(({ lines }) => animate(lines, {
  y: [
    { to: ['100%', '0%'] },
    { to: '-100%', delay: 750, ease: 'in(3)' }
  ],
  duration: 750,
  ease: 'out(3)',
  delay: stagger(200),
  loop: true,
  loopDelay: 500,
}));

<div class="large centered row">
  <p class="text-xl">Split text by lines.<br>線で分割します。</p>
</div>
<div class="small row"></div>