推荐用 intersectionobserver 实现滚动淡入，它原生支持懒加载式可见性检测、自动节流、可配置阈值；需配合 opacity + transition 实现平滑动画，并注意 ie 降级与多元素复用 observer 实例。
用 IntersectionObserver 实现滚动淡入，别再写 scroll 事件监听
直接上手就写 window.addEventListener('scroll', ...) 是最常见也最容易翻车的做法——性能差、触发太频繁、兼容性坑多。现代浏览器推荐用 IntersectionObserver，它原生支持懒加载式可见性检测，不卡主线程。
关键点：不是“滚动到哪就执行”，而是“元素进入视口时才触发”。IntersectionObserver 自动帮你节流，且支持配置阈值（比如元素底部刚露 10px 就算进入）。
- 初始化时传入回调函数和配置对象：
{ threshold: 0.1 }表示 10% 可见即触发 - 调用
observer.observe(element)开始监听目标元素，不是监听整个页面 - 回调中通过
entries[0].isIntersecting判断是否进入视口，然后加 class 触发动画 - 记得在回调里调用
observer.unobserve(element)，避免重复触发（尤其只做一次淡入）
CSS 动画部分必须配 opacity + transition，不能只靠 visibility
visibility: hidden 不占空间但无法过渡；display: none 根本不参与渲染。淡入效果必须基于 opacity 和 transition 才能平滑变化。
常见错误是写了 opacity: 0 却忘了设 transition: opacity 0.4s ease，或者把 transition 放在动画结束后的 class 上（应放在初始 class 中）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 初始状态：给目标元素加 class 如
fade-in-element，定义opacity: 0; transition: opacity 0.4s ease; - 可见时加的 class 如
is-visible，只写opacity: 1;，不要重复写 transition - 如果需要配合位移（比如从下往上浮入），可叠加
transform: translateY(20px)，同样需在初始 class 中声明 transition
IE 不支持 IntersectionObserver？用 polyfill 还是降级方案
IE 完全不支持 IntersectionObserver，连 Object.assign 都要垫一层。强行 polyfill（如 intersection-observer npm 包）会增大包体积，且在 IE11 下仍有边界判断不准的问题。
更务实的做法是：检测 API 存在性，不存在时 fallback 到简化逻辑——比如页面加载后延迟 100ms 统一给所有目标元素加 is-visible，不依赖滚动位置。
- 检测写法：
if ('IntersectionObserver' in window)，注意括号里是字符串，不是函数调用 - polyfill 加载方式：仅在 IE 用户代理下动态 import，避免影响现代浏览器首屏
- 降级时慎用
getBoundingClientRect()手动计算，容易因布局抖动或缩放导致误判
多个元素监听时，别为每个都 new 一个 Observer 实例
一个 IntersectionObserver 实例可以 observe 多个元素，复用比反复 new 更轻量。但要注意：所有被 observe 的元素共享同一套 threshold 和 rootMargin 配置。
如果你有两类元素——一个想 5% 可见就淡入，另一个要 80% 才触发——就不能共用 observer，得拆成两个实例，或者统一阈值后用 JS 在回调里二次过滤。
- 推荐做法：先用
document.querySelectorAll('.fade-in')拿到全部目标，循环调用observer.observe(el) - 避免在循环里 new Observer，否则内存泄漏风险高，且失去批量处理优势
- 如果某元素后续可能被销毁（如 React 组件卸载），务必在销毁前调用
observer.unobserve(el)
opacity: 0 时若同时设置了 pointer-events: none，会导致用户无法点击——淡入完成前要保留交互能力，除非你明确不需要。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
