Bootstrap 5 默认不支持 placeholder 动画，需手动添加 placeholder-glow 或 placeholder-wave 类（5.3+），低版本须自定义 keyframes；使用时需注意父容器定位、溢出和变换干扰，并采用 opacity 渐变切换以避免闪烁。
Placeholder 动画在 Bootstrap 5 中默认不生效
bootstrap 5 移除了 placeholder 类的 css 动画支持，仅保留基础灰阶占位样式。如果你直接写 <div class="placeholder col-6"></div>，它不会动——这不是你代码写错了，是框架本身没提供动画。
必须手动补上 CSS 才能触发波纹式加载效果：
- 加
placeholder-glow或placeholder-wave类（Bootstrap 5.3+ 才有） - 低版本（如 5.0–5.2）需自行引入
@keyframes placeholder和过渡规则 -
placeholder-wave要求父容器设position: relative，否则动画偏移错位
用 placeholder-wave 做骨架屏时的 DOM 结构陷阱
骨架屏不是“随便放几个 placeholder 就行”，placeholder-wave 的动画依赖背景渐变位移，一旦被 flex / grid 容器裁剪或 transform 干扰，就会卡住不动或闪烁。
常见翻车点：
- 父元素用了
overflow: hidden（比如卡片.card默认带圆角和隐藏溢出）→ 动画被截断 - 在
transform: scale(0.98)的容器里嵌套 → 动画坐标系错乱 - 用
col-*布局但没包在<div class="row">里 → width 计算异常，波纹跑偏
稳妥做法：骨架结构用纯 div + placeholder-wave + 显式 width/height，绕开响应式栅格参与渲染。
如何让骨架屏在数据加载完成时平滑消失
直接 display: none 切换会闪一下，因为 placeholder 的背景动画和真实内容的字体渲染节奏不同步。
推荐渐变切换逻辑：
- 给骨架容器加
transition: opacity .2s ease-out - 加载开始：移除内容区域，显示骨架，并设
opacity: 1 - 数据就绪后：先设
opacity: 0，等transitionend触发再removeChild或innerHTML = '' - 避免用
visibility: hidden→ 占位还在，影响布局重排
示例关键帧：
element.style.opacity = '0'; setTimeout(() => { element.remove(); }, 200);
兼容旧版 Bootstrap（v4.x）的骨架屏写法
Bootstrap 4 没 placeholder 类，得靠自定义类模拟。别用 .bg-light + .rounded 硬凑，那只是静态灰块。
最小可用方案：
- 定义
.skeleton类：含background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) - 加
background-size: 200% 100%和animation: loading 2s infinite - 动画关键帧必须用
@keyframes loading { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } - 注意：IE11 不支持
background-position百分比动画 → 若需兼容，改用 JS 驱动left位移
这个方案比引入整个 Skeleton 插件更轻，也更容易和现有 CSS 变量对齐。
实际做骨架屏最难的不是写动画，是让 placeholder 的尺寸、行高、圆角和最终内容像素级对齐。差 1px 都可能在切换瞬间露白边或抖动，建议用 getComputedStyle 对比骨架与真实组件的 border-radius 和 line-height。
