本文讲解如何使用单个 IntersectionObserver 高效触发多个 CSS 动画，通过 CSS 自定义属性（--percent）动态控制每个进度条的填充宽度，避免重复监听器导致的样式覆盖问题。
本文讲解如何使用单个 intersectionobserver 高效触发多个 css 动画，通过 css 自定义属性（`--percent`）动态控制每个进度条的填充宽度，避免重复监听器导致的样式覆盖问题。
在实现“滚动触发动画”的交互效果时，一个常见误区是为每个目标元素创建独立的 IntersectionObserver 实例——这不仅冗余低效，还容易因逻辑混淆导致所有元素应用相同动画（如你代码中 observer.observe(...) 被误用于 observer1/observer2 的目标，造成监听失效与样式错乱）。
✅ 正确做法是：复用一个观察器，批量监听所有目标元素，并借助 CSS 自定义属性实现差异化动画控制。
一、精简 JavaScript：单观察器 + 批量监听
const inViewport = (entries, observer) => {
entries.forEach(entry => {
// 使用 toggle 确保离开视口时可逆（如需持续显示动画，可改用 add）
entry.target.classList.toggle("active", entry.isIntersecting);
});
};
// 创建唯一观察器实例
const observer = new IntersectionObserver(inViewport);
// 一次性监听所有技能条（推荐使用语义化类名如 `.skill`）
document.querySelectorAll(".skill").forEach(el => observer.observe(el));
⚠️ 注意：原代码中 observer1 和 observer2 均未被调用 observe()，且错误复用了 observer 实例，导致后两个元素完全未被监听。
二、CSS 层：用 --percent 驱动独立动画
核心思路是将动画参数（填充百分比）从 JS 解耦至 HTML 内联样式，由 CSS var(--percent) 动态读取并参与 background-size 计算：
.skill {
padding: 0.5rem 1rem;
margin: 0.5rem;
/* 平滑过渡填充宽度 */
transition: background-size 1.2s ease-out;
/* 双层背景：底层灰色轨道 + 上层红色进度条 */
background:
linear-gradient(90deg, #e74c3c 0%, #e74c3c 100%) no-repeat, /* 进度条 */
linear-gradient(0deg, transparent 30%, #ddd 30%, #ddd 70%, transparent 70%) no-repeat; /* 轨道 */
background-size: 0% 100%, 100% 100%; /* 初始：进度条宽度为 0 */
}
.skill.active {
/* 关键：用 calc() 将 --percent 转为具体宽度值（如 --percent:95 → 95%） */
background-size: calc(var(--percent) * 1%) 100%, 100% 100%;
}
三、HTML 结构：声明式定义各元素参数
<div class="skill" style="--percent:95;">HTML</div> <div class="skill" style="--percent:60;">CSS</div> <div class="skill" style="--percent:78;">JavaScript</div>
✅ 每个元素通过 style="--percent:X" 独立声明填充比例，CSS 自动计算并应用，无需 JS 分别处理。
四、进阶提示
- 性能优化：IntersectionObserver 默认监听视口，若需更精细控制（如延迟触发），可传入 { threshold: 0.1 }（当 10% 元素可见时触发）。
- 可访问性：为 .skill 添加 role="progressbar" 和 aria-valuenow 属性，提升屏幕阅读器支持。
- 兼容性：CSS custom properties 在现代浏览器中已全面支持；如需兼容 IE，可用 CSS-in-JS 方案替代 var(--percent)。
通过以上结构，你不仅能解决多动画同步错乱的问题，还能获得高度可维护、易扩展的滚动动画系统——只需新增带 --percent 的 .skill 元素，无需修改一行 JS 或 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
