Javascript文本上滑动画仅单个animate-text类生效问题求助

问题根源 #

document.querySelector(".animate-text")只会选中页面中第一个匹配该类名的元素，第二个.animate-text元素完全没被纳入动画逻辑，自然不会产生动画效果。

修复方案 #

需要获取所有.animate-text元素，为每个元素创建独立的动画实例（每个元素维护自己的索引和定时器状态），修改后的代码如下：

修改后的JavaScript代码 #

// 获取所有带animate-text类的元素
const animateTextElements = document.querySelectorAll(".animate-text");

const textInTimer = 3000,
      textOutTimer = 2800;

// 为每个元素单独初始化动画
function initAnimateText(element) {
  const txts = element.children;
  const txtsLen = txts.length;
  let index = 0;

  function animate() {
    // 移除所有子元素的动画类
    for (let i = 0; i < txtsLen; i++) {
      txts[i].classList.remove("text-in", "text-out");
    }
    // 当前元素添加进入动画
    txts[index].classList.add("text-in");

    // 延迟添加退出动画
    setTimeout(() => {
      txts[index].classList.add("text-out");
    }, textOutTimer);

    // 切换到下一个元素，循环执行
    setTimeout(() => {
      index = index === txtsLen - 1 ? 0 : index + 1;
      animate();
    }, textInTimer);
  }

  // 启动当前元素的动画
  animate();
}

// 页面加载完成后，为每个元素初始化动画
window.onload = () => {
  animateTextElements.forEach(initAnimateText);
};

CSS代码（无需修改） #

.home .tree p {
  margin: 0;
  overflow: hidden;
}
.home .tree p span {
  font-size: 2.8vw;
  color: grey;
  font-weight: 500;
  display: none;
}

.home .tree p span.text-in {
  display: block;
  animation: textIn 0.5s ease;
}
.home .tree p span.text-out {
  animation: textOut 0.5s ease;
}
@keyframes textIn {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes textOut {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

HTML代码（无需修改） #

<div class="home">
  <div class="tree">
    <p class="animate-text">
      <span class="">first</span>
      <span class="">second</span>
      <span class="text-in">third</span>
      <span class="">forth</span>
      <span class="">fifth</span>
    </p>
  </div>
</div>

<div class="home">
  <div class="tree">
    <p class="animate-text">
      <span class="">first</span>
      <span class="">second</span>
      <span class="text-in">third</span>
      <span class="">forth</span>
      <span class="">fifth</span>
    </p>
  </div>
</div>

关键修改说明 #

• 用document.querySelectorAll(".animate-text")替代querySelector，获取所有目标元素
• 新增initAnimateText函数，为每个元素创建独立的动画逻辑，每个元素维护自己的index变量，避免多个元素共用状态导致冲突
• 遍历所有目标元素，逐个初始化动画

内容的提问来源于stack exchange，提问作者Caramelpros