Intersection Observer 触发不准主因是默认 threshold=0 过于敏感，应设为 [0.1, 0.3, 0.5] 并配合 class 切换、forwards 动画保持、兼容性降级及仅对 opacity/transform 动画等优化。

Intersection Observer 触发时机不准，元素进视口就闪一下

根本原因是默认阈值太敏感，threshold 设为 0（默认）时，只要元素哪怕 1px 进入视口就触发，但此时 CSS 动画可能还没准备好，或浏览器渲染帧没跟上，导致“闪现”。

• threshold 改成 [0.1, 0.3, 0.5]，让动画在元素 30% 可见时才开始，留出缓冲
• 确保目标元素有明确高度（避免塌陷），否则 getBoundingClientRect() 返回的 height 为 0，Observer 误判
• 不要在 callback 里直接加 style.transition，改用预设 class 切换，比如从 fade-in--pending → fade-in--active

CSS 动画一滚动就重播，停不下来

这是把 animation 写在了每次触发的 class 上，而没控制播放状态。浏览器看到 class 加上又去掉，就当新动画重来。

• 用 animation-fill-mode: forwards 确保动画结束后保持末帧样式
• 动画只在 class 第一次添加时生效，后续靠 opacity 和 transform 的终值维持，不依赖重复播放
• 避免用 animation: fade-in 0.6s ease-out 直接写在触发 class 里；改用 @keyframes + transition 组合更可控

移动端 Safari 不触发 Intersection Observer

iOS 12.2+ 才原生支持，老版本会静默失败。不是 bug，是兼容性断层。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须检测 'IntersectionObserver' in window，不支持时降级为 scroll + getBoundingClientRect() 轮询（慎用，性能差）
• Safari 对 rootMargin 的解析有偏差，比如写 '0px 0px -50px 0px' 可能被忽略，建议统一用正数并配合 threshold 补偿
• 某些微信内置浏览器（X5 内核）会禁用 IntersectionObserver，需加 UA 判断或强制降级

渐现动画卡顿、掉帧

常见于同时监听多个元素，或动画属性触发重排（width、height、left、top）。

• 只对 opacity 和 transform 做动画，这两者走合成层，不触发布局和绘制
• 给目标元素加 will-change: transform（仅必要时），但别滥用，否则内存开销明显
• Observer 的 callback 里别做 DOM 查询或样式计算，用 entry.target 直接操作，避免回流

最麻烦的其实是滚动过程中频繁触发 + 动画未结束就再次进入 —— 得靠节流、状态标记、animationend 事件清理三者配合，不然视觉上就是抽搐。这点容易被当成 CSS 写错了，其实逻辑在 JS 层。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！