如何使多行&的js动画效果一个接一个地动画？ [英] how to make this js animation effect for multi line & animate one by one?

问题描述

如何使多行&

就像

 < h1类一样= rks1>第一行< / h1> 
< h1 class = rks1>然后第二行< / h1> 
< h1 class = rks1>然后第三行< / h1> 
< h1 class = rks1>然后第四行< / h1> 
< h1 class = rks1>然后第五行< / h1> 
  

&更多...
然后重新启动第一行
或我认为可能会这样：

 < h1 class = rks1>第一行< / h1> 
< h1 class = rks2>然后第二行< / h1> 
< h1 class = rks3>然后第三行< / h1> 
< h1 class = rks4>然后第四行< / h1> 
< h1 class = rks5>然后第五行< / h1> 
  

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

  var textWrapper = document.querySelector（'。rks1'）; textWrapper .innerHTML = textWrapper.textContent.replace（/（\S *）/ g，m => {返回`< span class = word>`+ m.replace（/（-|）？\ S（-| @）？/ g，< span class ='letter'> $&< / span>）+`< / span>`;}）; var目标= Array.from（ document.querySelectorAll（'。rks1 .letter'））; anime.timeline（{loop：true，}）.add（{targets：targets，scale：[3,1]，scaleY：[1.5,1]，不透明度： [0,1]，translateZ：0，缓动： easeOutExpo，持续时间：400，延迟：（el，i）=> 60 * i}）。add（{targets：targets.reverse（），scale：[ 1,3]，scaleY：[1,1.5]，不透明度：[1,0]，translateZ：0，缓动： easeOutExpo，持续时间：100，延迟：（el，i）=> 30 * i}） .add（{不透明度：0，持续时间：2 000，缓动： easeOutExpo，延迟：800}）;  

  .rks1 {font-weight：900; font-size：2.5em; font-family：rr;}。rks1 .letter {display：inline-block; line-height：1em;}。word {空白： 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>首先为该行设置动画，好< / h1>< h1 class = rks1>然后第二行< / h1>< h1 class = rks1>然后第三行< / h1>< h1 class = rks1>然后，第四行< / h1>< h1 class = rks1>然后，第五行< / h1>或可以是以下格式：&更多...  

i想要使它像首先为一行动画，然后在同一位置为下一行动画，然后再进行动画，依此类推。
干草！ stackoverflow社区中的任何人都可以在此功能中对此JavaScript进行更改，使其速度更快。
这对我来说非常重要。

解决方案

使用将所有字母和单词都用span换行querySelectorAll 和 forEach

  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目标= Array.from（document.querySelectorAll（'。rks1 .letter'））; anime.timeline （{loop：true，}）.add（{target：target，scale：[3，1]，scaleY：[1.5，1]，opacity：[0，1]，translationZ：0，缓动： easeOutExpo，持续时间：400，延迟：（el，i）=> 60 * i}）。add （{{targets：targets.reverse（），scale：[1,3]，scaleY：[1,1.5]，不透明度：[1,0]，translateZ：0，缓动： easeOutExpo，持续时间：100，延迟： （el，i）=> 30 * i}）。add（{不透明度：0，持续时间：2000，缓动： easeOutExpo，延迟：800}） 

  .rks1 {font-weight：900;字号：2.5em； font-family：rr;}。rks1 .letter {display：inline-block;行高：1em;}。word {空格：nowrap;}。span {}  

 <脚本src = https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js>< / 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>首先为该行设置动画，好< / h1>< h1 class = rks1>然后第二行< / h1>< h1 class = rks1>然后第三行< / h1>< h1 class = rks1>然后，第四行< / h1>< h1 class = rks1>然后，第五行< / h1>或可以是以下格式：&更多...  

how to make this js animation effect for multi line & animate one by one ?

Just like

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

& more... then restart first line or i think it may like:

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

& more... then restart first line

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

i want to make this like firstly animate one line and then on same place animate next line, then next, same as as so on. hay ! stackoverflow community anybody make change this javascript in this feature, make it fast plz. this is very important to me.

解决方案

Wraps all letters and words with span using querySelectorAll and forEach

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

这篇关于如何使多行&的js动画效果一个接一个地动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！