placeholder-wave动画不跑因父容器未设position: relative、存在overflow: hidden或transform干扰；须满足三条件：显式relative定位、无溢出隐藏、无变换，推荐用固定宽高的div绕开栅格。
Bootstrap 5.3+ 的 placeholder-wave 动画为啥不跑？
不是你漏写了 JS，是父容器的 CSS 状态直接锁死了动画。placeholder-wave 本质是 background-position 位移，它依赖稳定的坐标系——一旦父级没设 position: relative，位移就参考根文档流，波纹“飞”到屏幕外；如果父级有 overflow: hidden（比如 .card 默认带圆角+隐藏溢出），动画区域被硬裁，只看到半截波纹。
必须满足三个条件才动：
- 父容器显式加
position: relative - 父容器不能有
overflow: hidden或overflow: clip - 父容器避免
transform（如scale(0.98)、translateZ(0)），否则背景坐标系重置
稳妥做法：骨架结构别套 .row/.col，用
img-fluid 和图片占位符能一起用吗？
能，但得手动补 ::before 占位层，因为 Bootstrap 的 img-fluid 只管响应式缩放，不提供加载态。原生没 img-placeholder 类，直接写 
要实现灰底占位+响应式，得自己加一层：
.img-placeholder {
position: relative;
display: inline-block;
}
.img-placeholder::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #e9ecef;
}
.img-placeholder img {
display: block;
width: 100%;
height: auto;
}
用的时候包一层：::before 不会随图片宽高自适应，所以务必让父容器有明确尺寸（比如 max-width: 300px）或用 aspect-ratio 控制比例。
placeholder-glow 和 placeholder-wave 怎么选？
看内容节奏：placeholder-glow 是忽明忽暗的呼吸感，适合文字块（标题、段落）、小图标；placeholder-wave 是横向扫过的渐变条，模拟数据流，更适合卡片、列表项、头像等有宽度方向的容器。
两者不能混用——加了 placeholder-wave 再加 placeholder-glow，后者会被覆盖，因为它们都靠 background 实现，且 placeholder-wave 的 CSS 优先级更高。
关键区别：
-
placeholder-glow对父容器定位要求低，position: relative非必需 -
placeholder-wave必须配position: relative，且只在块级元素里稳定（inline元素会塌掉高度） - 颜色统一走
currentColor，想改色得额外加bg-*类（如bg-primary）或覆写background
加载完成时怎么切得不闪？
直接 display: none 或 innerHTML = '' 一定会闪——因为 placeholder-wave 的 CSS 动画帧和真实图片/文字的字体光栅化节奏不同步，人眼会捕捉到“先黑一帧再出现内容”的断层。
平滑切换只有一条路：opacity 渐变 + 节点延迟移除。
示例逻辑（不用框架）：
const placeholder = document.querySelector('.placeholder-wave');
placeholder.style.opacity = '0';
placeholder.addEventListener('transitionend', () => {
placeholder.remove();
}, { once: true });
前提是 placeholder 元素已声明 transition: opacity .2s ease-out。别用 visibility: hidden——它保留占位，可能撑开布局或影响后续元素重排；也别用 setTimeout 硬等，浏览器 repaint 时机不可控。
容易被忽略的点：如果 placeholder 嵌在 flex 容器里，移除后其他子项会重排，建议给容器加 flex-shrink: 0 或用 grid 固定轨道，否则“消失”本身也会造成轻微跳动。
