不能只用opacity和transition实现页面加载淡入，因为opacity:0元素仍占文档流、引发布局抖动、无法延迟渲染，且未解决资源未就绪导致的白屏问题。
直接用 opacity + transition 做页面级淡入加载，90% 的情况下会出问题——因为初始状态不可见时，元素仍占布局空间、可能触发滚动条跳动、且无法真正“延迟渲染”。真正可用的方案是配合 visibility 和 transform 控制呈现时机，而不是只靠 opacity: 0 → 1。
为什么不能只用 opacity 和 transition 实现页面加载淡入？
常见错误是这样写：
body { opacity: 0; transition: opacity 0.6s ease-out; }
body.loaded { opacity: 1; }
问题在于：
-
opacity: 0的元素仍参与文档流，页面内容会先“挤”出来再变透明，造成布局抖动或白屏错觉 - 浏览器已渲染完 DOM 和样式，
opacity变化只是视觉层叠加，无法解决首屏资源未就绪的真实白屏 - 没有控制 JS 执行时机，若
.loaded类过早添加（比如 DOMContentLoaded 阶段），图片/字体可能还没加载完成
正确做法：用 visibility + opacity + transform 组合控制呈现
关键不是“怎么动”，而是“什么时候开始动”。必须等关键资源就绪后才触发动画：
- 等待
DOMContentLoaded确保 HTML 解析完成 - 额外监听
fonts.load()或图片load事件（如首屏 banner 图） - 用
visibility: hidden初始隐藏，避免占位；动画中用transform: translateY(10px)微调起始位置，防止重排
示例 CSS：
body { visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
body.loaded { visibility: visible; opacity: 1; transform: translateY(0); }
JS 触发时机示例：
document.fonts.load('16px "Inter"').then(() => {
document.body.classList.add('loaded');
});
如何避免动画期间用户误操作？
淡入过程中用户仍可点击、滚动，但内容尚未稳定。必须加一层保护：
- 在
body上临时加pointer-events: none，动画结束再移除 - 禁用
scroll-behavior: smooth，否则滚动会和淡入冲突 - 如果用了
max-height或height动画，务必设overflow: hidden，否则内容可能溢出
推荐结构：
body { pointer-events: none; }
body.loaded { pointer-events: auto; }
要不要用 magic.css 这类第三方库？
可以，但要清楚代价：
-
magic.css的magictime类本质仍是基于opacity+transform，它没解决“何时触发”的核心问题 - 它默认使用
@keyframes+animation，比transition更难精确控制结束回调（比如你想在动画完再初始化 Swiper） - 如果项目已用 Webpack/Vite，直接引入
magic.min.css没问题；但如果是 SSR 页面，需确保服务端不提前注入.magictime类，否则首屏会闪一下
更轻量的替代：自己封装一个仅含 3 个关键帧的 @keyframes fade-in，比引入整个库更可控。
最常被忽略的一点：过渡时间不能统一设成 0.3s 或 0.6s。真实网络下，字体加载、图片解码、JS 执行都不可控，硬编码时长会导致动画卡在半途或过早结束。应该用 getComputedStyle 检测动画是否真正完成，再移交控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
