用CSS opacity+transition可实现无JS淡入淡出，关键需显式设置transition、正确初始化opacity值（0或1），并通过类切换或:hover伪类触发变化，注意transition必须作用于目标元素本身且避免display/visibility干扰动画。
用 CSS opacity + transition 实现最简淡入淡出
不用 JavaScript 就能做，关键在控制透明度变化和过渡时机。初学者最容易卡在「写了但没动」——通常是因为漏了 transition 或初始状态设错。
-
opacity值范围是 0（完全透明）到 1（完全不透明），不能写成百分比 - 必须给元素显式设置
transition: opacity 0.5s ease;，否则变化是瞬时的 - 初始状态建议用内联样式或类控制，比如
<img src="x.jpg" class="fade-in">，再在 CSS 里写.fade-in { opacity: 0; transition: opacity 0.6s ease; } - 触发淡入：加一个类如
.show，定义为.show { opacity: 1; }，然后用 JS 切换类，或直接用:hover测试效果
用 :hover 快速验证效果（免 JS）
适合练手和调试，避免过早陷入 JS 逻辑。鼠标悬停即淡入，移开即淡出，本质是靠伪类切换 opacity 值。
.fade-img {
opacity: 0;
transition: opacity 0.4s ease;
}
.fade-img:hover {
opacity: 1;
}
注意：这个写法只适用于交互触发，不能自动播放；如果图片默认要显示，就把初始 opacity: 1，:hover 设为 0 实现淡出。
用 setTimeout 模拟自动轮播淡入淡出（轻量 JS）
真轮播需要更多逻辑，但仅实现「一张图先淡出、再淡入下一张」，用两个 <img> + 切换类就足够。核心是错开两图的显示时机，避免同时透明。
- 两图用相同尺寸容器包裹，定位重叠：
position: relative+position: absolute; top: 0; left: 0; - 第一张初始
opacity: 1，第二张opacity: 0 - JS 中先给第一张加
.fading-out（设opacity: 0），等transitionend事件或固定延时（如setTimeout400ms）后再把第二张设为opacity: 1 - 别直接用
display: none替代opacity，它会破坏过渡动画
常见报错和失效原因
90% 的「没效果」问题都出在这些地方，不是代码写错，而是被浏览器或 CSS 层叠规则卡住：
-
transition写在了父容器上，但实际改的是子元素opacity—— 必须写在被改变属性的元素本身上 - 用了
visibility: hidden或display: none配合opacity，导致过渡中断 - CSS 文件没加载成功，或选择器优先级太低被覆盖（可用浏览器开发者工具检查 computed 样式里
opacity和transition是否生效） - 图片路径错误导致
<img>渲染为空白，看起来像“没淡入”，其实根本没加载
淡入淡出看着简单，但真实项目里常要兼顾加载状态、响应式缩放、焦点可访问性。先跑通基础版本，再逐个补细节更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
