如何使这个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

使用 和 将所有字母和单词括起来，并带有跨度querySelectorAllforEachvar textWrappers = document.querySelectorAll('.rks1');textWrappers.forEach(textWrapper => {&nbsp; textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {&nbsp; &nbsp; return `<span class="word">` +&nbsp; &nbsp; &nbsp; m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +&nbsp; &nbsp; &nbsp; `</span>`;&nbsp; });});var targets = Array.from(document.querySelectorAll('.rks1 .letter'));anime.timeline({&nbsp; &nbsp; loop: true,&nbsp; })&nbsp; .add({&nbsp; &nbsp; targets: targets,&nbsp; &nbsp; scale: [3, 1],&nbsp; &nbsp; scaleY: [1.5, 1],&nbsp; &nbsp; opacity: [0, 1],&nbsp; &nbsp; translateZ: 0,&nbsp; &nbsp; easing: "easeOutExpo",&nbsp; &nbsp; duration: 400,&nbsp; &nbsp; delay: (el, i) => 60 * i&nbsp; }).add({&nbsp; &nbsp; targets: targets.reverse(),&nbsp; &nbsp; scale: [1,3],&nbsp; &nbsp; scaleY: [1,1.5],&nbsp; &nbsp; opacity: [1,0],&nbsp; &nbsp; translateZ: 0,&nbsp; &nbsp; easing: "easeOutExpo",&nbsp; &nbsp; duration: 100,&nbsp; &nbsp; delay: (el, i) => 30*i&nbsp; }).add({&nbsp; &nbsp; opacity: 0,&nbsp; &nbsp; duration: 2000,&nbsp; &nbsp; easing: "easeOutExpo",&nbsp; &nbsp; delay: 800&nbsp; }).rks1 {&nbsp; font-weight: 900;&nbsp; font-size: 2.5em;&nbsp; font-family: rr;}.rks1 .letter {&nbsp; display: inline-block;&nbsp; line-height: 1em;}.word {&nbsp; 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...