placeholder动画不生效的根源在于bootstrap版本、父容器定位溢出设置及切换时的视觉状态同步。5.3+才支持placeholder-glow/wave；父容器需position: relative且避免overflow: hidden或transform；切换宜用opacity渐变而非display控制。
Placeholder 动画不生效？先查版本和类名
Bootstrap 5.3+ 才原生支持 placeholder-glow 和 placeholder-wave，5.0–5.2 版本压根没打包这些 CSS 规则。加了也白加——不是你漏写 JS，是框架本身没提供。
- 检查
node_modules/bootstrap/dist/css/bootstrap.min.css文件头，或 CDN 链接是否含@5.3.0+ -
placeholder基础类只定义背景色、圆角、尺寸，动画必须靠额外类触发；单写<div class="placeholder col-6"></div>就是静态灰块 - 低版本必须手动补
@keyframes placeholder+transition规则，否则无动画
用 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);
React + Bootstrap 混用时的坑：别把
Placeholder当纯 HTML 用react-bootstrap 的
Placeholder组件封装了animation、as、xs等 props，但底层仍依赖 Bootstrap CSS 的动画规则，版本错配照样失效。- 确保项目中引入的是
bootstrap@5.3.0+的 CSS，react-bootstrap 不会自动帮你带 Bootstrap 动画样式 -
<placeholder animation="wave"></placeholder>在低版本 Bootstrap 下只是个静止灰条，不是组件 bug - 若用 Vite，确认
index.html中<link>引入的 CSS 是 5.3+，而不是从node_modules里 import 导致版本错乱 - 自定义颜色需显式传
bg，因为默认用currentColor，不加bg参数时不会响应主题色
- 给骨架容器加
