遮罩层淡入淡出需同时设置 opacity 和 visibility 过渡，并用 class 控制状态：.mask 设 opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s；.mask--active 设 opacity: 1; visibility: visible；JS 显示时 add，隐藏时延时 250ms remove。
遮罩层显示太突然，本质是 opacity 从 0 到 1 的切换没有过渡动画。只需给遮罩元素添加 transition: opacity 0.3s ease;，并配合 JS 或 class 控制 opacity 值即可实现柔和淡入淡出效果。
基础 CSS 过渡设置
确保遮罩层默认隐藏且带过渡属性：
- 初始状态设为 opacity: 0; visibility: hidden;（visibility 防止点击穿透）
- 添加过渡： transition: opacity 0.25s ease, visibility 0.25s;
- 显示时改为 opacity: 1; visibility: visible;
JS 控制 class 切换更稳妥
直接操作 style 容易覆盖其他样式，推荐用 class 控制：
- 定义两个 class：
.mask（基础样式 + transition）和.mask--active（opacity: 1; visibility: visible） - 显示时：
maskEl.classList.add('mask--active'); - 隐藏时建议加延时移除 class，等动画结束再清理，避免闪一下：
setTimeout(() => maskEl.classList.remove('mask--active'), 250);
注意 visibility 和 opacity 的配合
只靠 opacity 过渡会有“可点击但看不见”的问题（透明但仍在文档流中）：
立即学习“前端免费学习笔记（深入）”；
- opacity: 0 时元素仍响应事件，需配合 visibility: hidden 或 pointer-events: none
- 但
visibility本身不支持过渡，所以要和 opacity 同步设 transition，或用 JS 分两步控制 - 更简洁方案：用
pointer-events: none配合 opacity，显示时再设为auto
可选增强：加轻微缩放或背景渐变
纯透明度过渡有时略显平淡，可微调提升质感：
- 淡入同时加
transform: scale(1.02)→scale(1)，模拟轻微“浮现”感 - 遮罩背景用
background: rgba(0,0,0,0.4)而非纯黑，更柔和 - 过渡函数选
ease-out或cubic-bezier(0.25, 0.46, 0.45, 0.94)，比默认 ease 更自然
基本上就这些。关键不是堆效果，而是让 opacity 变化有缓冲、交互状态清晰、视觉反馈及时。不复杂但容易忽略细节。
