直接用 opacity 过渡会导致闪动和页面重排，因骨架屏与真实内容需占据相同几何空间且不能触发 layout；应固定容器尺寸、用 visibility+opacity 占位、加 will-change 优化，并用 transition 配合延迟 visibility 切换。
为什么直接用 opacity 过渡会出问题
骨架屏切换时如果只写 opacity: 0 → 1，真实内容一出现就“啪”一下弹出来，用户能明显感知闪动。更糟的是，当真实内容比骨架屏高或宽时，页面会重排（reflow），导致下方元素跳动——这不是动画问题，是布局塌陷。
关键在于：骨架屏和真实内容必须占据完全相同的几何空间，且过渡过程不能触发 layout。
- 确保骨架容器设固定
height和min-height（不能依赖内容撑开） - 真实内容用
visibility: hidden+opacity: 0占位，加载完成再切为visibility: visible+opacity: 1 - 过渡仅作用于
opacity，且必须加will-change: opacity提前提示合成层
CSS 动画方案：用 transition 而非 animation
transition 更适合这种状态驱动的切换——骨架屏消失、内容出现是离散事件，不是时间轴控制。用 @keyframes 反而难对齐时机，还容易因重复触发导致动画卡顿。
推荐写法：
.skeleton {
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.content {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
}
.content.loaded {
opacity: 1;
visibility: visible;
}
注意两点：visibility 的延迟过渡（0s 0.3s）确保它在 opacity 动画结束后才生效，避免闪回；cubic-bezier(0.4, 0, 0.2, 1) 比 ease 更顺滑，减少突兀感。
JS 触发时机：别在数据 ready 后立刻移 class
真实内容 DOM 渲染完成 ≠ 样式计算完成 ≠ 图片/字体加载完毕。过早切换会看到文字先出来、图片后加载导致高度变化。
- 用
requestAnimationFrame延迟到下一帧，确保样式已应用 - 若含图片，监听
img的load事件，或用document.fonts.ready处理自定义字体 - 最稳妥做法：封装一个
waitForRender()工具函数，内部组合raf+offsetHeight检查 + 可选资源监听
示例片段：
function showContent(el) {
el.classList.add('loaded');
requestAnimationFrame(() => {
// 确保渲染完成后再允许交互
el.setAttribute('aria-hidden', 'false');
});
}
React/Vue 中容易忽略的 SSR 兼容细节
服务端渲染时，骨架屏和真实内容不能同时存在 DOM 中，否则 hydration 会失败或产生不一致警告。常见错误是条件渲染写成 {loading ? <skeleton></skeleton> : <content></content>}，导致客户端首次渲染没有骨架节点，CSS 过渡失效。
正确做法：
- 始终渲染骨架屏占位容器，用 CSS 控制显隐（如
.skeleton { display: block; }/.skeleton.hidden { display: none; }） - 真实内容也始终挂载，仅靠
opacity和visibility控制可见性 - Vue 用户注意
v-show是 OK 的，但v-if会销毁节点，禁用
过渡是否自然，往往取决于服务端和客户端是否共用同一套 DOM 结构——骨架屏不是“临时替身”，而是真实布局的一部分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
