bootstrap 5.3+才原生支持placeholder-glow和placeholder-wave动画；低版本需手动补@keyframes，父容器须设position: relative且避免overflow: hidden或transform干扰，加载切换推荐opacity渐变而非display控制。
Placeholder动画不生效？先确认Bootstrap版本和类名
Bootstrap 5.3+ 才原生支持 placeholder-glow 和 placeholder-wave 动画类；5.0–5.2 版本压根没提供这些 CSS 规则，直接加类等于白写。这不是你漏写了 JS，是框架本身没打包进去。
- 检查你用的是否为
bootstrap@5.3.0+（查node_modules/bootstrap/dist/css/bootstrap.min.css文件头或 CDN 链接） - 低版本必须手动补
@keyframes+ 过渡规则，否则placeholder就是一块静态灰块 -
placeholder基础类只定义背景色和圆角，动画完全靠额外类触发——别指望只写<div class="placeholder col-6"></div>就会动
用 placeholder-wave 时父容器一动就错位？定位和溢出是关键
placeholder-wave 动画本质是背景渐变位移，它对父级的 position、overflow 和 transform 极其敏感，稍有干扰就会卡住、闪烁或跑偏。
- 必须给父容器加
position: relative，否则波纹位移参考系错误，动画“飞出去” - 避免父级设
overflow: hidden（比如.card默认带圆角+隐藏溢出），会直接裁掉动画区域 - 别在
transform: scale(0.98)或translateZ(0)的容器里嵌套，CSS 变换会重置背景坐标系 - 骨架结构建议绕开栅格参与渲染：用显式
width/height的<div> + <code>placeholder-wave，而非依赖.col-6计算宽度数据加载完骨架屏闪一下？opacity 渐变比 display 切换更稳
直接
display: none或innerHTML = ''会因 placeholder 背景动画帧与真实内容字体渲染节奏不同步，导致视觉闪烁。- 给骨架容器加
transition: opacity .2s ease-out - 加载完成时先设
element.style.opacity = '0'，等transitionend事件再移除节点 - 别用
visibility: hidden——占位还在，可能撑开布局或影响后续元素重排 - 示例逻辑：
element.style.opacity = '0'; setTimeout(() => { element.remove(); }, 200);
想兼容 Bootstrap 4 或自定义颜色？别硬套 placeholder 类
Bootstrap 4 根本没有
placeholder类，强行用bg-light rounded模拟只是静态色块，毫无加载感；而 Bootstrap 5 的placeholder默认用currentColor，不加bg参数时不会响应主题色。- Bootstrap 4 推荐手写骨架动画：
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)+background-size: 200% 100%+ 自定义@keyframes loading - Bootstrap 5 中要用语义色，得显式传
bg="primary"等，不能只靠继承文本色 - React 生态下用
react-bootstrap时，<placeholder bg="success" size="lg"></placeholder>才真正生效，纯 HTML 写法不支持这些 props
- 给骨架容器加
