必须统一设置.carousel-item、.carousel-item.active、.carousel-item-next、.carousel-item-prev四类选择器的transition，且transform和opacity均需包含；data-bs-interval须≥transition-duration×1000+100毫秒，否则闪屏。
只改.carousel-item的transition-duration会闪屏
Bootstrap 5.3+ 的轮播动画不是靠单个 class 驱动，而是由三个状态协同控制：.carousel-item（基础项）、.carousel-item.active（当前显示）、.carousel-item-next和.carousel-item-prev（进出项）。漏掉任意一个，浏览器就会对缺失类回退到默认 0.6s，造成视觉撕裂或跳变。
必须统一写死这四类选择器的过渡规则，且transform和opacity都要包含：
.carousel-item {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
别用!important硬顶——优先级靠后引入 CSS 或加在 Bootstrap 之后更稳妥；单位统一用s，别混用ms或省略小数点。
data-bs-interval和transition-duration必须配对
CSS 控动画过程，JS 控触发节奏。两者不匹配，人眼看到的是“闪屏”，不是“快”。公式是：data-bs-interval ≥ transition-duration × 1000 + 100（单位毫秒）。
- 设
transition-duration: 0.3s→ HTML 中至少写data-bs-interval="400" - 设
transition-duration: 0.2s→data-bs-interval至少为"300" - 设为
0或false会禁用自动播放，负数会被忽略
注意：data-bs-interval只在初始化时读取一次，后续改 HTML 属性无效；动态改需先调carousel('pause')，再更新_config.interval，最后carousel('cycle')。
移动端 touch 滑动不响应新速度？这不是 CSS 的问题
transition-duration对鼠标悬停、左右箭头、键盘导航都生效，但对 touch 拖拽完全无效——它依赖 JS 的touchstart/touchend节流逻辑，和 CSS 过渡无关。
- 真机测试比 DevTools device toolbar 更可靠，部分 Android WebView 对
transform过渡有延迟渲染 - 确认引入的是
bootstrap.bundle.min.js（含 Popper），而非仅 CSS +bootstrap.min.js - 检查是否被第三方库（如
hammer.js）劫持了 touch 事件监听器
容易被忽略的渲染优化点
即使 CSS 和 JS 都配对了，低端设备或复杂 DOM 下仍可能卡顿。关键不是加will-change: transform，而是确保轮播容器本身没被其他样式强制触发重排（比如父元素用了flex + align-items: stretch撑高子项）。
另外，多个轮播图共用$('.carousel').carousel({ interval: 2000 })会全部被覆盖——每个实例必须单独初始化，别用通配符选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
