动画多个 headers 具有相同的 class

Question

问题已解决

感谢 Nalin Ranjan 的帮助！

jsFiddle showing animation being applied to one header (the code is a modified version of this GitHub project).

jsFiddle 显示应用于所有 header 的动画。

问题

我想对多个 header 应用相同的动画。我有五个 header 和 class fancy1，目前动画只应用于第一个 header。

这个 jsFiddle 包含我用来制作一个 header 动画的代码，尽管动画在 jsFiddle 中似乎不起作用。

您可以在下面的屏幕截图中看到，拉斯维加斯 header.

的动画正在播放运行的中途

动画一个的旧解决方案header

 const text1 = document.querySelector('.fancy1');
    const strText1 = text1.textContent;
    const splitText1 = strText1.split("");
    text1.textContent = "";

for(let i=0; i<splitText1.length; i++){
    text1.innerHTML += "<span>"+ splitText1[i] + "</span>";
}

let char1 = 0;
let timer1 = setInterval(onTick,150);

function onTick(){
    const span1 = text1.querySelectorAll('span')[char1];
    span1.classList.add('fade');
    char1++;
  

    if (char1 === splitText1.length){
       
        complete1();
        return;
    }
}

function complete1(){
   
    clearInterval(timer1);
    timer1 = null;
}

失败的解决方案 1

我试着给五个 header 单独的 class 命名 - fancy1、fancy2、fancy3、fancy 4 和 fancy5。

const text = document.getElementsByClassName(".fancy1");
Split(text)
const text = document.getElementsByClassName(".fancy2");
Split(text)

function Split(text){
const strText = text.textContent;
const splitText = strText.split("");
text.textContent = "";

for(let i=0; i<splitText.length; i++){
   
    text.innerHTML += "<span>"+ splitText[i] + "</span>";
   
}

let char = 0;
let timer = setInterval(onTick,150);
}

function onTick(){
    
    const span = text.querySelectorAll('span')[char];
    span.classList.add('fade');
   
    char++;
  
    if (char === splitText.length){
    
        complete();
        return;
    }
}

function complete(){
   
    clearInterval(timer);
    timer = null;
}

解决方案 2 失败

我试过使用全局变量

const window.text = document.getElementsByClassName(".fancy1");
Split()
const window.text = document.getElementsByClassName(".fancy2");
Split()
const window.text = document.getElementsByClassName(".fancy3");
Split()
const window.text = document.getElementsByClassName(".fancy4");
Split()

function Split(){
const strText = (window.text).textContent;
const splitText = strText.split("");
text.textContent = "";

for(let i=0; i<splitText.length; i++){
   
    text.innerHTML += "<span>"+ splitText[i] + "</span>";
   
}

let char = 0;
let timer = setInterval(onTick,150);
}

function onTick(){
    
    const span = text.querySelectorAll('span')[char];
    span.classList.add('fade');
    char++;
    if (char === splitText.length){
       
        complete();
        return;
    }
}
function complete(){
    clearInterval(timer);
    timer = null;
}

解决方案 3 失败（基于 Nalin Ranjan 的回复）

在对 Nalin Ranjan 的解决方案进行了一些调整后，我不再在控制台日志中收到错误消息。但是 none 的动画正在播放。

const headers = document.querySelectorAll('.fancy1');

headers.forEach(text => Split(text));

function Split(text){

const strText = text.textContent;
const splitText = strText.split("");
text.textContent = "";

for(let i=0; i<splitText.length; i++){
   
    text.innerHTML += "<span>"+ splitText[i] + "</span>";
   
}

window.char = 0;
window.timer = setInterval(onTick,1500);
window.text = text
window.splitText = splitText
}

function onTick(){
    
    const span = window.text.querySelectorAll('span')[window.char];
    span.classList.add('fade');
   
    window.char++;
  
  console.log(window.char)
  console.log(window.splitText.length)
    if (window.char === window.splitText.length){

        console.log("is it working?")
    
        complete();
        return;
    }
}

function complete(){
   
    clearInterval(timer);
    window.timer = null;
}

Answer 1

document.querySelector returns 结果是单个元素，但是您想将函数应用于多个元素，所以为什么不使用 document.querySelectorAll.

试试这个怎么样...

const headers = document.querySelectorAll('.fancy1');

headers.forEach(header => Split(header));

function Split(text) {

  const strText = text.textContent;
  const splitText = strText.split("");
  text.innerHTML = "";

  for (let i = 0; i < splitText.length; i++) {

    text.innerHTML += "<span>" + splitText[i] + "</span>";

  }

  let char = 0;
  let timer = setInterval(onTick, 150);

  function onTick() {
    const spans = text.querySelectorAll('span');
    const currentSpan = spans[char];
    currentSpan.classList.add('fade');

    char++;

    if (char === splitText.length) {

      complete();
      return;
    }
  }

  function complete() {

    clearInterval(timer);
    timer = null;
  }
}

动画多个 headers 具有相同的 class

Animating multiple headers that have same class

html

javascript

animation

css-animations