本文详解为何 `queryselector(".animate-text")` 仅触发首个元素动画，并提供使用 `queryselectorall` 遍历所有匹配元素的完整解决方案，确保每个 `.animate-text` 容器内文字滑动动画独立、同步运行。

在 JavaScript 中，document.querySelector(selector) 方法只返回文档中第一个匹配指定 CSS 选择器的元素——这正是你遇到“只有第一个 div 动画生效”问题的根本原因。你的 HTML 中存在两个

，但原始代码仅获取并操作了第一个，第二个被完全忽略。

要修复该问题，必须改用 document.querySelectorAll(".animate-text")，它返回一个 NodeList（类数组对象），包含所有匹配的元素。接着通过 .forEach() 为每个 .animate-text 容器单独初始化独立的动画逻辑，避免状态（如 index）互相干扰。

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

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

  const TEXT_IN_DURATION = 3000; // 文字停留时间（ms）
  const TEXT_OUT_DURATION = 2800; // 滑出过渡延迟（ms）

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

    // 激活当前 span
    spans[currentIndex].classList.add("text-in");

    // 2.8 秒后触发滑出动画
    setTimeout(() => {
      spans[currentIndex].classList.add("text-out");
    }, TEXT_OUT_DURATION);

    // 3 秒后切换到下一个（注意：此处总周期 ≈ TEXT_IN_DURATION）
    setTimeout(() => {
      currentIndex = (currentIndex + 1) % spanCount; // 循环取模，更简洁
      startAnimation();
    }, TEXT_IN_DURATION);
  };

  startAnimation();
};

// ✅ 关键修复：遍历所有 .animate-text 元素，分别启动动画
document.querySelectorAll(".animate-text").forEach(animateTextContainer);

? 重要注意事项：

立即学习“Java免费学习笔记（深入）”；

• 避免全局变量污染：原代码中 index 是全局变量，导致多个容器共用同一状态。新方案将 currentIndex 限定在每个 animateTextContainer 函数作用域内，实现完全隔离。
• CSS 无需修改：你已正确设置 span.text-in { display: block; } 和 span.text-out 的动画，只需确保初始状态无 text-in（建议移除 HTML 中手动添加的 class="text-in"，由 JS 统一控制起始帧）。
• 性能提示：若页面元素较多，可考虑使用 requestAnimationFrame 替代 setTimeout 实现更平滑的动画调度；但当前定时器方案对少量文本轮播完全适用。
• 可扩展性：该结构天然支持任意数量的 .animate-text 容器——新增

  ...

  后，JS 自动为其启用动画，无需额外配置。

最后，确保 DOM 加载完成后再执行脚本（推荐使用 DOMContentLoaded 而非 window.onload，后者需等待图片等资源加载完毕）：

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".animate-text").forEach(animateTextContainer);
});

至此，两个（或更多）.home .tree p.animate-text 将各自独立运行文字滑入/滑出动画，互不干扰，真正实现「一处编写，多处生效」的健壮交互效果。