滚动淡入应使用intersectionobserver监听元素进入视口（threshold设为0.1），配合初始opacity:0与transition，通过class切换触发动画，避免内联样式修改和重复创建observer实例。
滚动时内容淡入，核心是「元素进入视口才触发动画」，不是靠定时器或页面加载完就全放出来。用 IntersectionObserver 是当前最轻量、性能最好、也最符合现代浏览器实践的方式；手动计算 scrollTop + getBoundingClientRect() 容易卡顿且兼容性差，不推荐。
用 IntersectionObserver 监听元素是否进入视口
这是实现滚动淡入的首选方案。它原生支持、无重绘压力、自动处理节流，连 iOS Safari 13.4+ 都已稳定支持。
- 必须给目标元素设初始状态：
opacity: 0+transform: translateY(20px)（或其他位移），再配transition: opacity 0.6s ease, transform 0.6s ease -
IntersectionObserver的threshold建议设为0.1（即元素 10% 进入视口就触发），太小（如0）会导致快速滚动时漏触发 - 不要在
callback里直接改style.opacity—— 这会破坏 CSS transition；统一用 class 切换，比如添加.is-visible - 观察器实例建议复用，避免每个元素都新建一个 observer 实例（内存和性能双浪费）
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
// 可选：停止监听已动画过的元素
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.anim-target').forEach(el => observer.observe(el));
CSS 动画类必须写对，否则淡入失效或闪退
常见错误是动画类没加 animation-fill-mode: forwards 或 transition 写错位置，导致动画播完立刻回退到透明状态。
-
transition必须定义在「初始类」（如.anim-target），不能只写在.is-visible里；否则移除 class 时不会反向过渡 - 如果用
@keyframes而非transition，务必加animation-fill-mode: forwards，否则动画一结束就跳回opacity: 0 - 慎用
visibility: hidden替代opacity: 0——visibility不支持过渡，且会脱离文档流，可能影响布局 - 若淡入时文字有抖动，大概率是字体未加载完成；可加
font-display: optional或给容器设固定line-height和min-height
移动端需注意 scroll-behavior 和 will-change 的副作用
在 iOS 或部分 Android WebView 中，过度使用 will-change: transform 可能引发渲染异常或白屏；而 scroll-behavior: smooth 有时会干扰 IntersectionObserver 的触发时机。
- 仅对真正需要淡入的元素加
will-change: opacity，且动画结束后立即移除（用 JS 在transitionend事件里清理） - 不要全局设置
html { scroll-behavior: smooth }，它会让scrollIntoView等行为变慢，也可能延迟 IntersectionObserver 的回调 - 真机调试时，优先检查
isIntersecting是否为true，而不是只看 class 有没有加上——有些低端安卓机 observer 回调被系统节流，需配合rootMargin微调 -
rootMargin: '0px 0px -50px 0px'是个实用技巧：让元素提前 50px 开始触发，弥补快速滚动下的判定延迟
最易被忽略的一点：淡入动画不是越慢越好。超过 0.8s 的 duration 在移动端会明显感知卡顿；而 ease-out 比 linear 更自然，但别用 cubic-bezier(0.2, 0.9, 0.5, 1.2) 这类夸张缓动——它会让动画后半段拖沓，用户已经滑过去了，文字还在慢慢浮现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
