实现骨架屏到真实内容无缝过渡需结构同构、contain: layout锁定容器、replaceChildren()原子替换及opacity渐变控制，避免重排跳动闪白。
要让 H5 页面中骨架屏过渡到真实内容看起来“无缝”，关键不是加个动画就完事，而是从结构、样式、DOM 操作三个层面协同控制，避免重排、跳动、闪白。核心目标是：用户感知不到替换动作，只看到内容自然浮现。
结构同构：骨架必须是真实 DOM 的“影子副本”
骨架元素和真实内容节点必须严格对齐：
- 层级数量一致（比如真实是
<article><h2><img><p>，骨架也得是同样嵌套深度的空<div>） - class 名完全相同（
class="post-title"不能写成class="skeleton-title"） - data 属性如
data-testid、data-id必须一一对应 - 禁用伪文字、
src、alt等语义内容，防止屏幕阅读器误读
容器锁定：父容器必加 contain: layout
这是防抖动的底线保障。没有它，哪怕结构再准、动画再顺，图片加载回填、字体渲染、第三方脚本注入都可能触发外部布局扰动，导致骨架“跳一下”。
- 直接写在骨架与真实内容共用的父容器上，例如：
style="contain: layout;" - 不要用
contain: strict或contain: paint，只有layout能锁住内部尺寸变化不外溢 - 若用 CSS-in-JS 或 Shadow DOM，需确认该样式确实生效到了最外层容器
替换方式：用 replaceChildren() 原子化更新
这是实现“无咔哒感”的技术分水岭：
- ❌ 避免
innerHTML = ''清空再塞新 HTML → 触发强制同步重排 - ❌ 避免
display: none切换 → 元素退出文档流，空间塌陷再恢复，必然跳 - ✅ 正确做法：
parent.replaceChildren(...newNodes)—— 只换子节点，保留父容器、焦点、事件监听器、CSS 动画上下文 - 兼容旧版 Safari？手动模拟：
while (el.firstChild) el.removeChild(el.firstChild); el.append(...newNodes)，但会丢失焦点
视觉过渡：opacity + 精确时机控制
不用 visibility（无法触发动画），不用 display（彻底退出流），opacity 是唯一兼顾平滑与交互隔离的属性：
- 骨架默认设：
opacity: 0.8; transition: opacity 0.25s ease-out; - 真实内容插入后，立即设置
opacity: 1，并移除所有 skeleton 相关 class - 禁用
will-change: opacity—— 在低端安卓或 iOS Webview 上反而引发额外合成层开销 - 动画时间建议 0.2–0.3 秒：太短显得生硬，太长拖慢感知速度
