淡入淡出效果必须用 opacity + transition 实现，因 display: none 和 visibility: hidden 不触发动画；display 切换是原子操作导致闪屏，且不在可动画属性列表中；opacity 方案需绝对定位、统一过渡时间（0.4s–0.6s）、初始化确保首图可见其余隐藏，并在 js 切换时同步 opacity 与 display 状态。
淡入淡出效果必须用 opacity + transition 实现，不能靠 display: none 或 visibility: hidden 切换——这两个属性根本不会触发 CSS 动画。
为什么 display: none 会导致闪屏
浏览器对 display 的切换是“原子操作”：上一帧还在、下一帧就彻底消失，中间没有过渡帧。用户看到的就是图片突然出现或瞬间消失，尤其首屏加载时所有图片堆叠闪一下，非常刺眼。
-
display不在 CSS 可动画属性列表里，加了transition: display 0.5s完全无效 - 即使配合
setTimeout做延迟隐藏，也容易因 JS 执行时机错位导致两张图同时 visible - 首次渲染时若没显式设
display: none给非首图，它们会以默认display: inline或block同时占据文档流，造成布局抖动
opacity + transition 的最小可行配置
所有轮播项必须绝对定位重叠，且只动 opacity，其他样式保持稳定。过渡时间建议设为 0.4s–0.6s，太短像闪，太长拖沓。
- 容器加
position: relative，子项统一position: absolute; top: 0; left: 0; width: 100%; height: 100% - 每张图默认
opacity: 0，当前图设为opacity: 1；不要用!important覆盖，靠类名优先级或 JS 直接写 style - CSS 必须写明
transition: opacity 0.5s ease-in-out，不能只写transition: all——那会把z-index等不可控属性也纳入动画 - 为防透底，建议给容器设
background-color: #000或background: black
JS 切换时最容易漏掉的初始化和状态同步
很多轮播一上来就闪三张图，问题出在 HTML 加载完成前，CSS 还没生效，JS 就开始设 opacity。必须确保首图初始就是可见的，其余图既 opacity: 0 又 display: none。
- HTML 中只给第一张图加
class="active"，并在 CSS 里定义.carousel-slide.active { opacity: 1; display: block } - JS 初始化时先遍历所有
.carousel-slide，把非.active的节点手动设style.display = 'none' - 切换函数里，先设下一张
display: block再设opacity: 1，上一张则先设opacity: 0再延时display: none（延时取transition时间，如500ms） - 用
setInterval自动轮播时，每次触发前先clearInterval当前句柄，避免用户狂点按钮导致多个定时器叠加
真正难的不是写出淡入淡出，而是让所有状态（opacity、display、z-index、class）在任意时刻都自洽——尤其是页面切到后台再切回来时，visibilitychange 事件得能恢复轮播节奏，否则用户回来就发现卡在半透明状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
