使用 opacity 和 visibility 结合 transition 实现弹窗淡入淡出；2. 默认隐藏时 opacity: 0、visibility: hidden，显示时通过 active 类切换为 opacity: 1、visibility: visible；3. 通过调整 transition 的延迟确保隐藏时 opacity 动画结束后才触发 visibility 变化，避免闪烁；4. JavaScript 控制 active 类的添加与移除，触发动画。
在CSS中实现弹出窗口的淡入淡出效果，需要结合 opacity 和 visibility 属性，并配合 transition 来创建平滑动画。直接使用 opacity 能控制透明度变化，但元素仍占据布局空间；而 visibility 可以真正控制是否显示，但本身不支持过渡动画。因此两者结合使用才能达到理想效果。
1. 基本结构与默认状态
先定义弹窗的基本结构和隐藏时的状态：
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
/ 初始状态：完全透明且不可见 /
opacity: 0;
visibility: hidden;
/ 添加过渡效果 /
transition: opacity 0.3s ease, visibility 0.3s ease;
}
2. 显示状态的样式
当给弹窗添加一个 active 类（或通过 JavaScript 控制）时，改变其 opacity 和 visibility：
.modal.active {
opacity: 1;
visibility: visible;
}
此时，transition 会自动在两个状态之间插值，实现淡入效果。
立即学习“前端免费学习笔记（深入）”；
3. 解决 visibility 瞬间切换问题
由于 visibility 不支持渐变，必须依赖 transition 的时间控制来同步 opacity 动画。关键在于设置合适的延迟或让 visibility 在 opacity 动画结束后再变化。
更精确的做法是：
- 隐藏时：opacity 先降到 0，然后 visibility 设为 hidden（延后执行）
- 显示时：visibility 立即 visible，opacity 从 0 升到 1
可通过调整 transition 设置优化：
.modal {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease 0s, visibility 0s linear 0.3s; /* 隐藏延迟 */
}
.modal.active {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease 0s, visibility 0s linear 0s; / 立即可见 /
}
这样在关闭弹窗时，opacity 动画完成后才隐藏元素，避免闪烁。
4. 配合JavaScript控制开关
用 JavaScript 切换 active 类即可触发动画：
const modal = document.querySelector('.modal');
// 打开
modal.classList.add('active');
// 关闭
modal.classList.remove('active');
只要类名变化，CSS 过渡就会自动播放淡入或淡出动画。
基本上就这些。opacity 负责视觉渐变，visibility 控制实际显示，transition 协调两者节奏，就能做出自然的弹窗动效。
