骨架屏不消失的首要原因是数据状态判断失效，如初始值设为空数组而非null、loading与data更新不同步、SSR hydration不一致、aria-hidden误用、DOM结构不匹配或缺少contain: layout等。
骨架屏不消失，先看 data 是否真的 ready 了
骨架屏残留最常见原因不是 CSS 或动画问题，而是状态判断逻辑没触发——真实数据已经返回，但组件仍认为 data === null 或 data.length === 0 成立。比如 React 中初始 state 设为 [] 而非 null，空数组被当作“有数据”，骨架永远不切走；Vue 中用 v-if="loading" 而非 v-if="!data"，导致 loading 变 false 后 data 还没赋值成功。
实操建议：
- 在控制台直接打印
data值，确认它是否为非空对象/数组（注意：{}和[]都是“真值”，不能靠!data判断） - 检查数据来源是否被缓存或 mock 拦截，比如 MSW 拦截后返回了空响应，但控制台没报错
- 若用 RTK Query 或 SWR，别依赖
isLoading，改用isSuccess && data != null作为切换条件
Vue/React 中 v-if / useEffect 没生效？检查 hydration 和挂载时机
SSR 场景下，服务端已渲染出真实内容，客户端 JS 执行后又把骨架塞进去，接着因状态没变而卡住不删——看起来就是骨架“ stuck ”。本质是 hydration 后 DOM 已就位，但组件没意识到该跳过骨架阶段。
实操建议：
- Vue 中，在
onMounted里加if (document.readyState === 'complete') return，避免重复激活骨架 - React 中用
useLayoutEffect替代useEffect，确保 DOM 更新前完成判断 - keep-alive 页面要监听
activated钩子并重置加载态，否则缓存的data会让骨架逻辑彻底失效
DOM 元素还在但看不见？检查 visibility: hidden 和 aria-hidden 冲突
骨架元素设了 visibility: hidden，但父容器又加了 aria-hidden="true"，部分读屏器（如 NVDA + Firefox）会缓存该状态，即使你后续移除了 aria-hidden，真实内容仍不被朗读——用户“看不见也听不见”，误以为骨架没消失。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- 骨架层只用
opacity: 0+pointer-events: none隐藏，保留语义和布局空间 -
aria-hidden="true"必须写在每个骨架节点上，不能只写外层容器；移除时也要逐个清除，不能只删父级 - 真实内容插入后，立刻给其容器加
role="region"和aria-live="polite"，并往aria-live区域注入一句提示文本
replaceChildren() 替换失败？结构不同构是硬伤
骨架节点和真实内容节点层级、class、子节点数不一致，replaceChildren() 会拒绝原子替换，降级为手动清空再 append，结果就是 DOM 重排 + 焦点丢失 + 动画中断——视觉上像“骨架闪一下然后内容突然砸下来”，其实它根本没“消失”，只是被暴力替换了。
实操建议：
- 对比服务端吐出的骨架 HTML 和客户端 hydrate 后的真实 DOM，运行
document.querySelector('.skeleton-list').outerHTML和document.querySelector('.list').outerHTML看是否完全一致 - 禁用动态 class 拼接，比如不要写
class="item {{ loading ? 'skeleton' : '' }}"，固定用class="item skeleton-item"，靠 CSS 控制显隐 - 图片占位统一用
，别用带src="data:"的
容器的 contain: layout 很容易被忽略——没有它，哪怕结构对齐、状态正确、动画平滑，局部重排仍可能发生，尤其在 flex/grid 容器内嵌骨架时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
