HTML5无内置淡入动画，需CSS（opacity/visibility/transition）与JS配合实现；图片加载完或滚动进入视口时触发动画更合理，避免重排卡顿。
HTML5 本身没有内置“淡入加载”动画，所谓淡入效果必须靠 CSS 动画 + JavaScript 控制元素的可见性与透明度来实现，核心是 opacity、visibility 和 transition 的配合，而非靠 HTML 标签或属性直接触发。
用 opacity + transition 实现基础淡入
这是最常用也最可控的方式：初始设 opacity: 0 和 visibility: hidden（避免占位空白），再通过 JS 切换 class 触发过渡。
.fade-in {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.fade-in.show {
opacity: 1;
visibility: visible;
}
关键点：
-
visibility: hidden必须和opacity: 0配合，否则元素仍占布局空间且可被聚焦 -
transition要显式列出所有要过渡的属性，不能只写transition: all，否则visibility无法平滑过渡（它只有两个离散值） - JS 中建议用
element.classList.add('show')，而不是直接改style.opacity，否则会覆盖 CSS 中定义的 transition
图片加载完成后再淡入（img.onload 场景）
直接给 fade-in 类会导致未加载时先闪白或留空，正确做法是等图片资源就绪再触发动画。
立即学习“前端免费学习笔记（深入）”；
常见错误：
- 用
DOMContentLoaded就加show类 → 图片可能还没加载完，出现“先淡入空白框” - 监听
load事件但没处理失败情况（如 404）→ 永远不淡入
推荐写法：
const img = document.querySelector('img[data-fade]');
img.addEventListener('load', () => {
img.classList.add('show');
});
img.addEventListener('error', () => {
img.classList.add('show'); // 失败也显示（避免卡死）
});
滚动进入视口才淡入（IntersectionObserver）
适用于长页面中“懒加载式”渐进显示，比监听 scroll 更轻量、更可靠。
注意细节：
- 必须设置
rootMargin，比如'0px 0px 100px 0px'，让元素在进入视口前 100px 就开始准备加载/动画，避免滚动过快时“跳入” -
threshold: 0.01表示只要 1% 可见就触发，比0更稳定（某些浏览器对0支持不佳） - 观察一次后记得调用
unobserve()，防止重复执行
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
observer.unobserve(entry.target);
}
});
}, { rootMargin: '0px 0px 100px 0px', threshold: 0.01 });
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
避免重排重绘导致卡顿（性能陷阱）
淡入动画卡顿往往不是因为动画本身，而是触发了 layout（重排）：
- 不要对
width/height/top/left等触发 layout 的属性做 transition —— 它们会让浏览器每帧都计算几何位置 - 优先用
opacity+transform（如transform: translateZ(0)或scale(1)）开启硬件加速，但注意transform本身不透明，需搭配opacity - 如果淡入的是含大量子元素的容器，考虑加
will-change: opacity提前提示浏览器，但仅用于必要节点，避免滥用
真正影响体验的，往往是没意识到 visibility 和 display 的语义差异，或把 transition 错误地绑定在动态插入的 DOM 上而没等样式就绪。这些细节比“怎么写动画”更决定最终是否自然。
