javascript - 文本从左到右淡入淡出的问题

Question

能否请您看一下这段代码，让我知道如何从文本的左到右添加淡入，使文本显示为 First S，然后是 t ，然后是 r ，...最后是最后一个字母 g?

$(".btn").on("click", function() {
  $(".str").addClass('present');
});

.str {
  opacity: 0;
  font-size: 32px;
  font-weight: bold;
  /*CSS3 transitions for animated effect*/
  transition: all 0.35s;
}
.present {
  opacity: 0.9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Display</button>
<div class="str">String</div>

Answer 1

您可以像下面的代码片段一样使用少量 JS(使用 jQuery)将元素的内容拆分为单独的字符，将它们全部包装到单独的 span 中，然后将类一个一个地添加到每个字符中。这将产生每个字符一个一个淡入淡出的效果。

这个答案与 Farzad 的答案非常相似，因为它使用了多个 span 字符，但两者之间存在显着差异。虽然另一个答案手动添加延迟，因此难以适应不同长度的文本，但此答案中的片段使用 transitionend 事件将类添加到下一个兄弟 span 一旦当前 span 的转换完成。因此，它也可以自动适应不同的文本长度。

$(document).ready(function() {
  $this = $('.str');
  var characters = $this.text().split("");
  $this.empty();
  $.each(characters, function(i, el) {
    $this.append("<span>" + el + "</span");
  });

  $(".btn").on("click", function() {
    $(".str span:nth-child(1)").addClass('present');
  });
  $('.str span').on('transitionend', function() {
    if ($(this).next('span').length != 0)
      $(this).next('span').eq(0).addClass('present');
  });
});

.str span {
  opacity: 0;
  font-size: 32px;
  font-weight: bold;
  transition: all 0.35s;
}
.str .present {
  opacity: 0.9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Display</button>
<div class="str">String</div>

注意:将内容拆分成单个字符的代码不是我自己的。它是从很久以前的 Stack Overflow 答案中挑选出来的，我目前没有指向它的链接。