淡入淡出必须用opacity+transition实现，因display:none和visibility:hidden为离散值，不参与渲染树过渡，w3c规定不可动画；强行添加transition无效，会导致闪烁或突显，正确做法是所有轮播项绝对定位叠层，仅靠opacity控制显隐。
淡入淡出效果必须用 opacity + transition 实现，display: none 或 visibility: hidden 无法触发过渡动画，强行加 transition 也没用。
为什么 display 切换会导致闪烁或突显
浏览器对 display 的修改是立即生效的，不参与 CSS 动画管线。哪怕你写了 transition: display 0.5s，它也完全被忽略——W3C 明确规定该属性不可动画。常见现象是：上一张图瞬间消失、下一张图瞬间出现，中间可能透出背景色，或两张图短暂重叠。
解决办法只有一个：所有轮播项必须始终在 DOM 中，且用 position: absolute 叠在同一位置；仅靠 opacity 控制“是否可见”，交由 transition 处理渐变过程。
- 初始状态所有图片
opacity: 0，首张额外设为opacity: 1 - 禁止在 JS 中调用
el.style.display = 'none'或el.classList.toggle('hidden') - 如果用了
visibility，同样不能加transition，它只控制渲染开关，不产生渐变
opacity 过渡必须配合绝对定位和 z-index
光有 opacity 不够，若图片是流式布局（display: block），它们会垂直堆叠，切换时高度反复坍缩/撑开，造成页面跳动。正确做法是让所有轮播项脱离文档流、占据同一空间。
关键 CSS 规则：
.carousel-slide {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
transition: opacity 0.6s ease-in-out;
z-index: 1;
}
.carousel-slide.active {
opacity: 1;
z-index: 2;
}
-
z-index必须动态管理，否则新图可能被旧图遮挡，导致“淡入失败”假象 - 容器需设
position: relative，否则absolute子项会相对于 body 定位 - 推荐加
aspect-ratio: 16/9或固定宽高，避免不同尺寸图片拉伸变形
Bootstrap 5 的 carousel-fade 类要慎用
Bootstrap 5 提供了 carousel-fade 类，但它默认的过渡逻辑是“同时淡出+淡入”，在图片尺寸不一致或网络加载慢时容易闪白或重叠。原生行为没有串行控制，必须手动覆盖。
修复方式是用更精确的类选择器区分阶段：
#myCarousel .active.carousel-item-end,
#myCarousel .active.carousel-item-start {
transition: opacity 0.6s ease-in-out 0s;
}
#myCarousel .carousel-item-next,
#myCarousel .carousel-item-prev {
transition: opacity 0.6s ease-in-out 0.6s;
}
-
carousel-item-end和carousel-item-start是 Bootstrap 在切换时自动添加的类，代表当前项退出方向 -
carousel-item-next/carousel-item-prev是待进入项，延迟 0.6s 启动，确保前一张已完全opacity: 0 - 务必同步调整
data-bs-interval，例如设为1200（0.6s × 2）
首屏加载时多图闪现怎么破
页面刚打开时所有图片都显示出来，一帧后才开始淡入淡出——这是初始化没做干净。根本原因是：HTML 渲染时所有 <img> 默认可见，而 CSS 的 opacity: 0 还没生效，造成“视觉竞态”。
安全初始化三步：
- HTML 中只给首张图加
class="active"，其余不加 - CSS 加强制隐藏规则：
.carousel-slide:not(.active) { opacity: 0; display: none; } - JS 初始化时先批量设
opacity: 0，再单独设active项为1，避免浏览器重排
最易被忽略的是 display: none 和 opacity: 0 的双重保障——前者防初始闪，后者保动画连贯。少一个，首屏就可能出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
