opacity: 0 不足以隐藏元素，因其仍占位、可点击、挡内容且不自动解绑事件；正确做法是过渡后配合 visibility: hidden 或 display: none 切断交互。
直接用 opacity + transition + JS 控制显隐状态就能做，但只改透明度会留坑——元素仍占位、可点击、能获焦点，必须同步处理交互与布局行为。
为什么 opacity: 0 不足以完成“隐藏”
单纯设 opacity: 0 后，按钮或图片仍在文档流中：
- 点击空白区域可能意外触发它
- Tab 键仍会停在不可见元素上
- 它挡住下方内容，导致鼠标无法穿透
- 若绑了事件监听器，不会自动解绑，内存泄漏风险上升
正确做法是：过渡阶段靠 opacity 实现视觉变化，过渡结束后用 visibility: hidden（保留位置）或 display: none（彻底释放空间）切断交互能力。
JS 控制渐隐渐现轮播的核心逻辑
关键不是“切换图片”，而是管理当前激活索引和 DOM 状态。常见错误是直接 fadeIn/fadeOut（jQuery）或反复 remove/append，性能差且易丢状态。
- 用一个
index变量跟踪当前显示项，每次切换前先清掉上一个的opacity: 1和类名 - 给所有轮播项统一加
transition: opacity 0.4s ease-in-out，只作用在目标元素上，别写在父容器 - 切换时：新项设
opacity: 1，旧项设opacity: 0，再加visibility: hidden（推荐）或等transitionend事件后再设display: none - 自动轮播用
setInterval，但用户手动操作时务必clearInterval，避免定时器叠加
CSS transition 参数怎么配才不卡
默认 transition: opacity 0.3s ease-in-out 在多数按钮场景够用，但轮播图有特殊要求：
- 全屏轮播建议用
0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)，收尾更沉稳 - 快速连点切换时，
ease-in-out容易造成“顿挫感”，换成linear更顺滑 - 别同时对
opacity和transform做长时长过渡，移动端 Safari 渲染压力明显上升 - 慎用
transition-delay，iOS Safari 对它的支持不稳定
最易被忽略的一点：轮播项如果用了 position: absolute 叠在一起，必须确保它们共享同一 z-index 层级，否则 opacity 变化时可能出现“闪一下”或层级错乱——这不是动画问题，是定位没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
