本文解决 `document.queryselector()` 仅选中首个匹配元素导致动画只在第一个容器生效的问题，通过 `queryselectorall()` 遍历所有目标元素，并为每个独立运行动画逻辑，确保多组滑动文本同步、互不干扰地工作。
在 JavaScript 中，document.querySelector(".animate-text") 仅返回文档中第一个匹配该选择器的元素，因此即使页面中存在多个 <p class="animate-text">，原始代码也只会对第一个进行动画控制，其余被完全忽略——这正是第二组文本“不工作”的根本原因。
要修复此问题，必须改用 document.querySelectorAll(".animate-text")，它返回一个 NodeList（类数组集合），包含所有匹配的元素。随后需遍历该集合，为每个 <p> 元素单独初始化并运行其专属的动画循环。
以下是优化后的完整实现方案：
✅ 正确做法：为每个 .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 类名一致性：确保所有 <span> 初始不含 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;
}forwards 确保动画结束后样式保留（如 transform: translateY(-100%)），避免闪回。
通过以上重构，无论页面中存在 2 个、5 个还是 20 个 .animate-text 容器，每个都将拥有独立、稳定、可预测的滑动文本动画——真正实现“一次编写，多处生效”。
立即学习“Java免费学习笔记（深入）”；
