css遮罩层显示过突然怎么办_使用transition-opacity实现柔和覆盖效果-css教程-PHP中文网

css遮罩层显示过突然怎么办_使用transition-opacity实现柔和覆盖效果

P粉602998670

发布： 2025-12-18 17:07:07

原创

906人浏览过

遮罩层淡入淡出需同时设置 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。

css遮罩层显示过突然怎么办_使用transition-opacity实现柔和覆盖效果

遮罩层显示太突然，本质是 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);