伪元素FadeOut过渡效果失效，如何实现点击触发的淡出？

你遇到的FadeOut失效问题，核心原因是**visibility: hidden会让元素瞬间不可见，无法触发opacity的过渡动画**。当你移除.bg-dark类时，body:after的visibility被重置为hidden，这直接跳过了opacity从1到0的渐变过程，所以看不到淡出效果。

修复方案：调整CSS，用opacity+z-index替代visibility控制显示状态 #

我们只需要修改SCSS代码，让body:after始终保持可见，仅通过opacity和z-index来控制它的显示层级和透明度：

body {
 height: 100%;
 padding: 0;
 margin: 0;
 color: $text-body;
 overflow-x: hidden;
 overflow-y: auto;
 &:after {
 content: '';
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -10;
 visibility: visible; /* 始终保持元素可见，不切换这个属性 */
 opacity: 0;
 background: rgba($color-black, 0.7); /* 把背景色移到默认状态，避免重复定义 */
 transition: opacity 1.2s ease-out;
 }
 &.bg-dark {
 &:after {
 opacity: 1;
 z-index: 100;
 /* 不需要重复写transition，继承默认的过渡配置即可 */
 }
 }
 @if $use-custom-fonts == true {
 font-family: $font-body-custom;
 }
 @else {
 font-family: $font-body;
 }
}

为什么这样修改有效？ #

• visibility: visible保持元素始终存在：这样元素不会因为visibility的切换而瞬间消失，opacity的过渡动画可以完整执行。
• 用z-index控制层级：默认状态下z-index设为-10，不会干扰页面其他元素的交互；添加.bg-dark时提升到100，让遮罩层覆盖在内容上方。
• 背景色统一声明：避免切换类时重复定义背景色，让代码更简洁易维护。

你的JavaScript逻辑完全没问题，不需要修改——点击菜单按钮添加.bg-dark触发淡入，点击关闭或ESC键移除类触发淡出，现在就能和淡入效果保持一致的动画体验了。

内容的提问来源于stack exchange，提问作者Galanthus