refresh()

手动再次拆分文本，同时考虑任何参数的更改。

const split = splitText(target);

split.html = 'Some new text to split';

split.refresh();

可以安全手动更新的属性是：

名称	描述
$target	分割元素（`HTMLElement`）
html	要拆分的 html (`String`)
debug	定义调试样式是否可见 (`Boolean`)
includeSpaces	定义是否应在文本中换行空格 (`Boolean`)
accessible	定义是否应创建可访问的克隆元素 (`Boolean`)
lineTemplate	该行 html 模板 (`String`)
wordTemplate	单词 html 模板 (`String`)
charTemplate	字符 html 模板 (`字符串`)

文本分割器

refresh() 代码示例

import { animate, stagger, splitText, utils } 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>

Anime.js | JavaScript Animation Engine

refresh()

返回

refresh() 代码示例