HTML 模板

自定义 HTML 模板可用于 lines、words 和 chars 属性，它们将作为所有拆分元素的包装器。

HTML 模板必须至少包含一个 '{value}' 变量，该变量将被拆分值替换。同样地，'{i}' 变量也可以使用，它将被当前拆分索引替换。

所有必要的样式，例如 'display: inline-block;'，将自动应用，无需在模板中定义。

例如，如果您将以下模板传递给 char 参数，如下所示：

splitText('p', { chars: '<em class="char-{i}">{value}</em>' });

拆分后的输出将是

<p>
  <em class="char-0" style="display: inline-block;">H</em>
  <em class="char-1" style="display: inline-block;">E</em>
  <em class="char-2" style="display: inline-block;">L</em>
  <em class="char-3" style="display: inline-block;">L</em>
  <em class="char-4" style="display: inline-block;">O</em>
</p>

接受

一个 String，至少包含一个对 '{value}' 的引用

HTML 模板代码示例

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

splitText('p', {
  chars: `<span class="char-3d word-{i}">
    <em class="face face-top">{value}</em>
    <em class="face-front">{value}</em>
    <em class="face face-bottom">{value}</em>
  </span>`,
});

const charsStagger = stagger(100, { start: 0 });

createTimeline({ defaults: { ease: 'linear', loop: true, duration: 750 }})
.add('.char-3d', { rotateX: -90 }, charsStagger)
.add('.char-3d .face-top', { opacity: [.5, 0] }, charsStagger)
.add('.char-3d .face-front', { opacity: [1, .5] }, charsStagger)
.add('.char-3d .face-bottom', { opacity: [.5, 1] }, charsStagger);

<div class="large centered row">
  <p class="text-xl">Custom HTML template.</p>
</div>

.char-3d {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50% 1rem;
}

.face {
  position: absolute;
  left: 0;
}

.face-bottom {
  top: 100%;
  transform-origin: 50% 0%;
  transform: rotateX(90deg);
}

.face-top {
  bottom: 100%;
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
}