必须为opacity添加transition-opacity和duration才能实现平滑过渡，否则仅切换opacity类会导致瞬间跳变；opacity=0不隐藏元素，需监听transitionend事件在动画结束后移除dom；图片切换需三步时序控制避免闪烁。
transition必须作用于opacity，不能只改class
很多人写 opacity-0 和 opacity-100 却没动画，问题出在漏了 transition-opacity。Tailwind 中这个类必须出现在元素首次渲染的 class 列表里，否则浏览器根本不会监听 opacity 变化。
错误写法：div className={`${isVisible ? 'opacity-100' : 'opacity-0'}`}——切换时只变 opacity，没过渡声明，结果就是瞬间跳变。
正确写法：div className={`transition-opacity duration-300 ${isVisible ? 'opacity-100' : 'opacity-0'}`}
-
duration-300必须显式指定，transition-opacity本身不含时长 - 别用
transition-all替代，它会把后续所有样式变更（比如 padding、color）都套上过渡，干扰预期效果 - 原生 CSS 同理：
transition: opacity 0.3s ease;必须写在默认状态（非:hover或.active）里，否则回退动画失效
图片src切换时，opacity过渡会断帧
标签 src 切换瞬间会短暂空白或闪烁，单纯靠
opacity 过渡无法覆盖这一间隙。必须用 JS 控制三步时序：先淡出 → 等待加载完成 → 再淡入。
- 先移除
.show，添加.fade（触发opacity: 0动画） - 用
setTimeout延迟与 CSS 过渡时长一致（如500ms），等淡出完成 - 更新
src，再移除.fade、添加.show（新图载入后渐显） - 更健壮的做法是监听
load事件：确保新图加载完毕再执行淡入，避免白屏
opacity=0不等于隐藏，DOM仍占位且可交互
opacity: 0 的元素依然在文档流中，占布局空间、能响应 hover/click、影响 tab 键导航。要真正“移除”，必须等动画结束再清理 DOM。
- 推荐监听
transitionend事件，而不是硬写setTimeout：更精准，不受时长误差或重排打断影响 - 需过滤事件：只响应
opacity属性的结束，避免height或transform等其他过渡干扰 - 移除前检查：
event.propertyName === 'opacity'且getComputedStyle(el).opacity === '0' - 别混用
visibility: hidden和transition-opacity：前者不可过渡，加了反而让动画直接消失
轮播场景下，多图切换要避免状态竞争
自动轮播时，如果上一张还没淡出完就触发下一张淡入，容易出现透明度叠加、闪动或卡顿。关键是要确保每次切换只操作当前激活项，并阻断并发。
- 给每张图加唯一标识（如 data-index），切换前校验是否仍是“当前有效目标”
- 用
clearTimeout清掉上一个定时器，防止旧任务延迟触发 - 如果用
setInterval，建议配合requestAnimationFrame或节流逻辑，避免高频触发 - 移动端 Safari 在 iOS 15.4 之前，纯
opacity过渡在滚动中可能掉帧，尤其配合position: fixed元素时，需加will-change: opacity提前提示合成
load、什么时候该听 transitionend、什么时候得清定时器——这些边界条件一漏，动画就露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
