骨架屏切换时按钮跳动的根本原因是盒模型与字体度量未对齐，应通过 opacity 过渡+共用样式实现平滑切换，避免 display 切换或状态判定失误。
骨架屏切换到真实内容时，按钮突然“弹”出来或闪一下，说明 DOM 替换或 display 切换没对齐盒模型和渲染时机——这不是动画问题，是结构与状态协同失控。
为什么
常见现象是：骨架屏里用 .skeleton-button 占位，数据一到就 innerHTML 替换或 display: none 切换，结果按钮位置偏移、尺寸抖动、圆角丢失。根本原因不是 CSS 写得不够 fancy，而是没让骨架按钮和真实按钮共享同一套盒模型约束：
-
box-sizing不一致（骨架用content-box，真实按钮用border-box） - padding/margin 策略混用（骨架靠
padding撑高，真实按钮靠line-height垂直居中） - 字体度量未对齐（骨架文本用空格模拟行高，真实按钮用
font-size+line-height，但值不同） - border 或 outline 在切换瞬间重绘（尤其 Safari 下
outline会触发重排）
用 opacity + pointer-events 实现按钮的平滑呈现
别用 display: none 或 visibility: hidden 控制按钮显隐——前者销毁布局流，后者保留空间但不可交互，都容易导致视觉突变。正确做法是让骨架和真实按钮共存于同一 DOM 位置，仅靠透明度过渡：
- HTML 中同时存在
<div class="skeleton-button"></div>和<button class="real-button">提交</button>，二者 position: absolute 或 flex 同层叠放 - 初始时骨架
opacity: 1，真实按钮opacity: 0; pointer-events: none - 数据加载完成，执行
element.classList.add('loaded')，CSS 中定义：.loaded .skeleton-button { opacity: 0; transition: opacity 0.2s ease-out; }<br>.loaded .real-button { opacity: 1; pointer-events: auto; transition: opacity 0.2s ease-in; } - 关键：两个元素必须使用完全相同的
width、height、border-radius、font-size和line-height，否则过渡过程会露馅
React/Vue 中按钮骨架状态容易踩的坑
框架里常把骨架逻辑耦合进 loading 状态，结果按钮在数据已存在时仍闪一下。问题出在状态判定时机不对：
立即学习“前端免费学习笔记（深入）”；
- Vue 中不要只监听
loading === true显示骨架——组件activated时缓存数据还在，但用户刷新页面后应重置；需在activated钩子中手动清空data或设为null - React 中若用
useState([])初始化列表，骨架判断data.length === 0就失效了；初始值必须是null或undefined，再用data == null判定 - SSR 场景下，服务端已吐出真实按钮，客户端 hydration 时骨架又插进来——需在
useLayoutEffect中检查document.readyState === 'complete'，仅当 DOM 完全就绪且无真实内容时才挂载骨架 - 按钮禁用态（
disabled）不能靠骨架模拟——骨架里加opacity: 0.6不等于真实禁用语义，应等真实按钮渲染后再由业务逻辑控制disabled
最麻烦的不是写动画，而是让骨架按钮和真实按钮在盒模型、字体度量、边框行为上做到像素级一致；哪怕 line-height 差 0.1，换行位置偏移，过渡时就会“撕裂”。
