refresh()
根据参数变化，手动再次分割文本。
const split = splitText(target);
split.html = 'Some new text to split';
split.refresh();可以安全手动更新的属性有：
| 名称 | 描述 |
|---|---|
| $target | 分割元素 (HTMLElement) |
| html | 要分割的 html (String) |
| 调试 | 定义调试样式是否可见 (Boolean) |
| 包含空格 | 定义文本中的空格是否应被包裹 (Boolean) |
| 可访问性 | 定义是否应创建可访问的克隆元素 (Boolean) |
| lineTemplate | 行的 html 模板 (String) |
| wordTemplate | 词的 html 模板 (String) |
| charTemplate | 字符的 html 模板 (String) |
返回
TextSplitter
refresh() 代码示例
import { animate, stagger, splitText } from 'animejs';
const [ $add, $remove ] = utils.$('button');
const [ $p ] = utils.$('p');
const split = splitText('p', {
lines: { wrap: 'clip' },
debug: true,
});
split.addEffect((self) => animate(self.words, {
y: ['0%', '75%'],
loop: true,
alternate: true,
ease: 'inOutQuad',
delay: stagger(150)
}));
const words = ['sit', 'amet', 'consectetur', 'adipiscing', 'elit', 'tortor', 'lectus', 'aliquet'];
const addRandomWord = () => {
split.html += ' ' + utils.randomPick(words);
split.refresh();
}
const removeRandomWord = () => {
const words = split.words.map(w => w.innerHTML);
split.html = (words.splice(utils.random(0, words.length - 1), 1), words).join(' ');
split.refresh();
}
$add.addEventListener('click', addRandomWord);
$remove.addEventListener('click', removeRandomWord);<div class="large centered row">
<p class="text-xl">Lorem ipsum dolor</p>
</div>
<div class="medium row">
<fieldset class="controls">
<button>Add word</button>
<button>Remove word</button>
</fieldset>
</div>