如何使这个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...我想让这成为首先动画一行，然后在同一个地方动画下一行，然后下一个，与依此类推相同。干草！堆栈溢出社区任何人在此功能中更改此javascript，请快速完成。这对我来说非常重要。

Answer 1

使用 和 将所有字母和单词括起来，并带有跨度querySelectorAllforEach

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...