javascript - 可以分别为每个字母制作动画吗？

Question

有没有办法仅使用 CSS 分别为单词中的每个字母设置动画？

我想可以使用 javascript/jquery 将单词作为字母数组进行迭代。

但在这里我正在寻找一个简单的出路..

Answer 1

无论是使用 CSS 还是 JavaScript，您(或某些库)都必须将每个字母放入其自己的元素中，以便分别为它们制作动画。例如:

<p>Hi there</p>

...需要成为

<p><span>H</span><span>i</span><span> </span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span></p>

这使我认为 JavaScript 解决方案可能是首选，否则您的标记会有点......写起来不愉快。

通过使用 jQuery 的 JavaScript，可以很容易地将一个元素的文本替换为一堆包含该文本的逐个字符的 span:

var target = $("#target");
target.html(target.text().replace(/./g, "<span>$&</span>"));

然后为 span 设置动画。 (请注意，我在这里假设所讨论的元素包含仅文本，而不包含文本和子元素。如果您有子元素，情况会更复杂。)

这是一个非常基本的例子:

HTML:

<p id="target" style="margin-top: 20px">Hi there</p>

JavaScript:

jQuery(function($) {

  var target = $("#target");
  target.html(target.text().replace(/./g, "<span>$&</span>"));

  setTimeout(runAnimation, 250);

  function runAnimation() {
    var index, spans;

    index = 0;
    spans = target.children();
    doOne();

    function doOne() {
      var span = $(spans[index]);
      if (!$.trim(span.text())) {
        // Skip blanks
        next();
        return;
      }

      // Do this one
      span.css({
        position: "relative",
      }).animate({
        top: "-20"
      }, "fast").animate({
        top: "0"
      }, "fast", function() {
        span.css("position", "");
        next();
      });
    }

    function next() {
      ++index;
      if (index < spans.length) {
        doOne();
      }
      else {
        setTimeout(runAnimation, 500);
      }
    }
  }

});

Live copy | source