骨架屏切换“咔哒一跳”是因 dom 替换方式错误；应使用 replacechildren() 原子替换，确保结构同构，并避免提前绑定事件监听器。
骨架屏切换到真实内容时“咔哒一跳”，根本不是动画没写好，而是 DOM 替换方式错了。直接用 innerHTML 清空再塞新 HTML、用 display: none 切换、或在 Vue/React 里暴力 v-if 控制显隐，都会触发强制重排，视觉上就是一次突兀的 layout shift。
replaceChildren() 是目前最稳妥的 DOM 替换方式
现代浏览器已原生支持 replaceChildren()，它能原子性地替换子节点，不销毁父容器，保留其绑定事件、focus 状态、CSS 动画上下文——这对骨架过渡至关重要。
- 必须确保骨架结构和真实内容结构完全同构：相同层级数量、
class名一致、data-*属性对齐（比如data-testid），否则框架 diff 会误判为全新节点 - 不要在骨架节点上提前绑定 click/mouseenter 等监听器，避免过渡瞬间触发两次
- 若需兼容旧浏览器（如 Safari while (el.firstChild) el.removeChild(el.firstChild) +
el.append(...newNodes)模拟，但注意这会丢失 focus
opacity 过渡比 display/visibility 更安全
display: none 会让元素彻底退出文档流，visibility: hidden 虽保留空间但无法触发 CSS transition；只有 opacity 配合 pointer-events: none 能兼顾平滑性和交互隔离。
- 骨架元素默认设
opacity: 0.8+transition: opacity 0.25s ease-out - 真实内容插入后立即设
opacity: 1，并移除所有 skeleton 类名 - 禁用
will-change: opacity—— 它在低端设备上反而引发额外合成层开销
Vue/React 中别用 loading 状态控制骨架显隐
用 loading === true 显示骨架，loading === false 隐藏，是典型反模式。它会导致 SSR hydration 后骨架闪一下，或 keep-alive 页面缓存数据后骨架永远不出现。
- Vue：检查
data === null || data.length === 0，而非loading；在onMounted里判断document.readyState === 'complete'避免服务端已渲染却重复显示骨架 - React：初始 state 设为
null，用useEffect对比prevData === null && data !== null触发替换 - 关键点：骨架存在与否，只取决于「当前有没有可渲染的真实数据」，跟请求是否发起、是否 pending 无关
最容易被忽略的是容器的 contain: layout style。骨架嵌套在 flex/grid 容器中时，不加这个声明，哪怕只改一个子元素的 opacity，也会导致整个容器重排。这不是动画问题，是布局隔离没做好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
