如何为多行和动画制作这个js动画效果？

Question

这个js动画效果如何制作多行&一一动画？

就像

<h1 class="rks1">  First Line </h1>
<h1 class="rks1">  Then Second Line </h1>
<h1 class="rks1">  Then Third Line </h1>
<h1 class="rks1">  Then Fourth Line </h1>
<h1 class="rks1">  Then Fifth Line </h1>

&更多... 然后重新启动第一行 或者我认为它可能喜欢：

<h1 class="rks1">  First Line </h1>
<h1 class="rks2">  Then Second Line </h1>
<h1 class="rks3">  Then Third Line </h1>
<h1 class="rks4">  Then Fourth Line </h1>
<h1 class="rks5">  Then Fifth Line </h1>

&更多... 然后重新启动第一行

var textWrapper = document.querySelector('.rks1');

textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return `<span class="word">` +
    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});

var targets = Array.from(document.querySelectorAll('.rks1 .letter'));

anime.timeline({
  loop: true,
})
  .add({
    targets: targets,
    scale: [3,1],
    scaleY: [1.5,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 400,
    delay: (el, i) => 60*i
  }).add({
    targets: targets.reverse(),
    scale: [1,3],
    scaleY: [1,1.5],
    opacity: [1,0],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 100,
    delay: (el, i) => 30*i
  }).add({
    opacity: 0,
    duration: 2000,
    easing: "easeOutExpo",
    delay: 800
  });

.rks1 {
font-weight: 900;
font-size: 2.5em;
font-family: rr;
}

.rks1 .letter {
display: inline-block;
line-height: 1em;
}

.word {
white-space: nowrap;
}

.span {
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   
<h1 class="rks1"> First animate this line Okay </h1>
<h1 class="rks1">  Then Second Line </h1>
<h1 class="rks1">  Then Third Line </h1>
<h1 class="rks1">  Then Fourth Line </h1>
<h1 class="rks1">  Then Fifth Line </h1>


or may be this format :



& more...

我想让这个首先动画一行，然后在同一个地方动画下一行，然后下一行，就像这样。 干草！ stackoverflow 社区任何人都可以在此功能中更改此 javascript，请使其快速。 这对我来说非常重要。

Answer 1

使用 querySelectorAll 和 forEach 将所有字母和单词用 span 包裹起来

var textWrappers = document.querySelectorAll('.rks1');

textWrappers.forEach(textWrapper => {
  textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
    return `<span class="word">` +
      m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
      `</span>`;
  });
});

var targets = Array.from(document.querySelectorAll('.rks1 .letter'));

anime.timeline({
    loop: true,
  })
  .add({
    targets: targets,
    scale: [3, 1],
    scaleY: [1.5, 1],
    opacity: [0, 1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 400,
    delay: (el, i) => 60 * i
  }).add({
    targets: targets.reverse(),
    scale: [1,3],
    scaleY: [1,1.5],
    opacity: [1,0],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 100,
    delay: (el, i) => 30*i
  }).add({
    opacity: 0,
    duration: 2000,
    easing: "easeOutExpo",
    delay: 800
  })

.rks1 {
  font-weight: 900;
  font-size: 2.5em;
  font-family: rr;
}

.rks1 .letter {
  display: inline-block;
  line-height: 1em;
}

.word {
  white-space: nowrap;
}

.span {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<h1 class="rks1"> First animate this line Okay </h1>
<h1 class="rks1"> Then Second Line </h1>
<h1 class="rks1"> Then Third Line </h1>
<h1 class="rks1"> Then Fourth Line </h1>
<h1 class="rks1"> Then Fifth Line </h1>


or may be this format : & more...