能，需配合 position: absolute 叠层及手动控制 opacity 和 z-index；纯 opacity 过渡不加定位会导致文档流占位，新图无法覆盖；transition 不生效常因未设初始 opacity 或用 display 中断重绘；JS 切换需监听 transitionend 并校验 propertyName；移动端卡顿可加 translateZ(0) 或 will-change 优化。
transition opacity 能不能直接实现多图淡入淡出？
能，但必须配合 position: absolute 叠层 + 手动控制 opacity 和 z-index，否则图片会“挤”着出现，不是覆盖切换。纯靠 opacity 过渡不加定位，浏览器会按文档流排布，淡出的图还在占位，新图根本上不来。
为什么只写 transition: opacity 0.5s 不生效？
常见错误是没给元素设初始 opacity: 0 或没触发重绘——比如用 display: none 切换，display 变化会中断 transition。正确做法是：始终用 opacity 控制显隐，用 visibility: hidden 配合（避免焦点/事件干扰），同时确保所有轮播项 position: absolute 且尺寸一致。
- 必须给轮播容器设
position: relative - 每张图加
position: absolute; top: 0; left: 0; - 避免用
display: none/block切换，改用opacity: 0+visibility: hidden -
transition写在通用类上（如.slide），别只写在:hover或 JS 动态 class 里
JS 控制时，opacity 切换顺序为什么总错乱？
因为 JS 同步修改多个元素的 opacity，浏览器可能批量重绘，导致过渡未完成就切下一张。关键是要等当前过渡结束再操作下一张——监听 transitionend 事件，且过滤掉非 opacity 的触发（比如 transform 也发这个事件）。
- 监听时加判断：
if (e.propertyName === 'opacity') - 每次只激活一张图：
currentSlide.style.opacity = '1'; currentSlide.style.zIndex = '2'; - 其他图统一设：
otherSlide.style.opacity = '0'; otherSlide.style.zIndex = '1'; - 不要用
setTimeout代替transitionend，时间难对齐，尤其用户切得快时
移动端 Safari 上淡入淡出卡顿或闪一下？
这是 Safari 对 opacity 动画优化不足的老问题，尤其在低配设备上。加 will-change: opacity 或强制硬件加速（transform: translateZ(0)）能缓解，但要注意：加了 transform 后，如果图本身有 transform（比如缩放），得合并写法，否则后者会被覆盖。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
transform: translateZ(0) scale(1); - 避免只写
transform: translateZ(0)然后又用 JS 改scale，会丢掉硬件加速 - 慎用
will-change，只加在正在动画的元素上，切完立刻移除，否则内存占用高 - 如果轮播图带
img标签，确保img有明确宽高，避免重排触发重绘抖动
