如何让 JavaScript 动画同时作用于多个具有相同类名的元素

雨伟小哥_5965

发布时间：2026-01-12 16:23:16

358人浏览过

来源于php中文网

原创

如何让 JavaScript 动画同时作用于多个具有相同类名的元素

本文解决 `document.queryselector()` 仅选中首个匹配元素导致动画只在第一个容器生效的问题，通过 `queryselectorall()` 遍历所有目标元素，并为每个独立运行动画逻辑，确保多组滑动文本同步、互不干扰地工作。

在 JavaScript 中，document.querySelector(".animate-text") 仅返回文档中第一个匹配该选择器的元素，因此即使页面中存在多个

，原始代码也只会对第一个进行动画控制，其余被完全忽略——这正是第二组文本“不工作”的根本原因。

要修复此问题，必须改用 document.querySelectorAll(".animate-text")，它返回一个 NodeList（类数组集合），包含所有匹配的元素。随后需遍历该集合，为每个

元素单独初始化并运行其专属的动画循环。

Blender Geometry Nodes Script Generator

生成Blender Python (bpy)脚本，该脚本使用node_groups API和GeometryNodeTree接口程序化地创建几何节点修改器树，用于参数化3D资产生成。

下载

以下是优化后的完整实现方案：

✅ 正确做法：为每个 .animate-text 独立启动动画

// 获取所有 animate-text 容器（注意是 querySelectorAll，不是 querySelector）
const textContainers = document.querySelectorAll(".animate-text");

// 将动画逻辑封装为可复用函数，接收单个 <p> 元素作为参数
function animateTextContainer(container) {
  const spans = container.children; // 所有 <span> 子元素
  const spanCount = spans.length;
  let currentIndex = 0;

  const TEXT_IN_DURATION = 3000; // 显示停留时长（ms）
  const TEXT_OUT_DURATION = 2800; // 淡出过渡时长（ms）

  function startAnimation() {
    // 清除所有 span 的动画类
    for (let i = 0; i < spanCount; i++) {
      spans[i].classList.remove("text-in", "text-out");
    }

    // 给当前 span 添加入场类
    spans[currentIndex].classList.add("text-in");

    // 延迟添加出场类（触发退出动画）
    setTimeout(() => {
      spans[currentIndex].classList.add("text-out");
    }, TEXT_OUT_DURATION);

    // 延迟后切换到下一个 span，并递归调用
    setTimeout(() => {
      currentIndex = (currentIndex + 1) % spanCount;
      startAnimation();
    }, TEXT_IN_DURATION);
  }

  // 立即启动该容器的动画
  startAnimation();
}

// 为每个 .animate-text 容器分别执行动画
textContainers.forEach(animateTextContainer);

⚠️ 关键注意事项

避免全局变量污染：原代码中 index 是全局变量，多个容器共用会导致状态冲突。新方案将 currentIndex 和定时器逻辑完全封装在闭包内，各容器互不影响。
CSS 类名一致性：确保所有初始不含 text-in 或 text-out（如示例中已移除冗余类），否则初始状态可能异常。
动画性能建议：transform + opacity 是 CSS 动画的高性能组合，当前 translateY 方案已符合最佳实践；若需更平滑效果，可添加 will-change: transform 到 span.text-in。
DOM 加载时机：使用 window.addEventListener('DOMContentLoaded', ...) 替代 window.onload 更可靠（后者等待全部资源加载），尤其适用于纯 DOM 操作。

✅ 补充 CSS（保持不变，但推荐微调）

.home .tree p span.text-in {
  display: block;
  animation: textIn 0.5s ease forwards; /* 添加 forwards 保持最终状态 */
}
.home .tree p span.text-out {
  animation: textOut 0.5s ease forwards;
}