使用CSS transition与opacity可实现元素淡入淡出效果。.fade-in初始opacity为0，添加.show类后过渡至1实现淡入；.fade-out初始opacity为1，添加.hide类后降至0完成淡出，配合visibility:hidden和display:none可在动画后彻底隐藏元素，适用于模态框、轮播图等场景。
使用CSS过渡（transition）与
opacity属性结合，可以轻松实现元素的淡入淡出效果。这种方式无需JavaScript，性能良好，并且易于控制。
基本原理
opacity 控制元素的透明度，取值范围从0（完全透明）到1（完全不透明）。通过 transition 定义 opacity 的变化过程，就能实现平滑的淡入淡出动画。
实现淡入效果
让元素从不可见到可见：
.fade-in {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade-in.show {
opacity: 1;
}
初始状态 opacity 为 0，添加
.show类后 opacity 变为 1，过渡动画自动触发。
立即学习“前端免费学习笔记（深入）”；
实现淡出效果
让元素从可见到隐藏：
.fade-out {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.fade-out.hide {
opacity: 0;
}
当添加
.hide类时，opacity 渐变为 0，实现淡出。
配合 display 使用更自然
由于
opacity: 0的元素仍占据布局空间，若想彻底隐藏元素，可结合
visibility或在动画结束后设置
display: none。
例如：
.fade-out {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.fade-out.hidden {
opacity: 0;
visibility: hidden;
}
这样既能动画过渡，又能真正隐藏元素。
常见应用场景
- 模态框出现/关闭
- 图片轮播切换
- 提示信息显示与消失
- 页面加载占位效果
基本上就这些，掌握 opacity 和 transition 的配合，就能快速做出流畅的视觉过渡效果。不复杂但容易忽略细节，比如过渡时间、延迟和完成后的状态处理。
