直接监听 scroll 事件易失效因高频触发导致浏览器来不及渲染过渡帧，应优先用 IntersectionObserver，或配合 requestAnimationFrame 节流；CSS 过渡须定义在默认状态且避免 layout 触发。
滚动时添加类触发 CSS 过渡，为什么直接监听 scroll 事件容易失效
因为 scroll 事件高频触发，如果每次都在回调里反复操作 classList.add/remove，会导致浏览器来不及渲染过渡帧，看起来像“跳变”或“无动画”。关键不是不能用类切换，而是得控制类变更的时机和频率。
- 避免在
scroll回调中直接写element.classList.toggle('active') - 优先用
IntersectionObserver替代手动计算滚动位置 —— 它天然防抖、性能好、语义清晰 - 若必须用
scroll，需配合requestAnimationFrame或节流（throttle），确保每帧最多更新一次类
IntersectionObserver 是滚动触发动画最稳的方案
它专为“元素进入/离开视口”设计，不依赖滚动位置计算，也不受页面缩放、iframe、position: sticky 等干扰，兼容性也足够（Chrome 51+/Firefox 55+/Safari 12.1+）。
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-in');
} else {
entry.target.classList.remove('animate-in');
}
});
},
{ threshold: 0.1 } // 元素 10% 进入视口时触发
);
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
-
threshold设为0表示“一像素进入就触发”，设为1表示“完全进入才触发” - 务必在 CSS 中定义
.animate-in的过渡属性，例如：opacity、transform，且初始状态要明确（如opacity: 0; transform: translateY(20px);） - 不要在
isIntersecting === false时强行重置为初始态——若用户快速滚动来回，可能造成闪烁；更稳妥的是只加类，靠 CSS 的transition自动回退
CSS 过渡必须写的几个关键点
光加类不够，CSS 层面稍有疏漏，动画就完全不生效。最容易被忽略的是过渡作用对象和触发条件不匹配。
立即学习“前端免费学习笔记（深入）”；
- 过渡必须写在「默认状态」上，而不是「动画类」里：
✅ 正确：.box { opacity: 0; transition: opacity 0.4s ease; } .box.animate-in { opacity: 1; }
❌ 错误：.box.animate-in { opacity: 1; transition: opacity 0.4s ease; } - 涉及
transform动画时，避免混用top/left等布局属性——它们会触发 layout，拖慢性能；统一用transform: translateY()等合成属性 - 若元素初始不可见（如
display: none），过渡无效；改用visibility: hidden+opacity: 0，并确保visibility不参与过渡（它不可动画）
scroll + requestAnimationFrame 手动实现的最小可行代码
当必须响应滚动距离（比如做视差或进度条），而非简单进出判断时，才考虑手动监听 scroll。核心是把 DOM 更新压进下一帧，避免卡顿。
let ticking = false;function updateElementState() { const scrollTop = window.pageYOffset; document.querySelectorAll('.parallax-item').forEach(el => { const offset = el.offsetTop; if (scrollTop > offset - window.innerHeight * 0.7) { el.classList.add('in-view'); } }); ticking = false; }
window.addEventListener('scroll', () => { if (!ticking) { requestAnimationFrame(updateElementState); ticking = true; } });
-
requestAnimationFrame确保更新与屏幕刷新同步，比setTimeout(..., 16)更可靠 - 别在
updateElementState里做复杂计算或查询 DOM；提前缓存el.offsetTop等值 - 类名切换后，依然要靠 CSS 的
transition实现动画，JS 只负责开关
滚动触发动画真正难的不是“怎么写”，而是“什么时候不该用 JS 控制”。IntersectionObserver 覆盖了 90% 的场景，而手写 scroll 监听极易陷入重排重绘陷阱。类切换本身没问题，但类是否生效、何时生效、是否被浏览器丢帧，全取决于你有没有绕过渲染管线的盲区。
