CSS问题：鼠标悬停元素时无法为.afterDim遮罩添加过渡效果

我仔细分析了你的问题场景，遮罩功能正常但过渡失效，大概率是过渡属性配置错误或者用了不可过渡的属性切换状态导致的，下面给你拆解原因和具体修复方案：

问题核心原因 #

很多人会用display: none和display: block来切换遮罩的显示/隐藏，但display是离散属性，没有中间过渡值，浏览器会直接跳过动画效果——哪怕你加了transition属性也没用。另外，如果过渡属性只定义在激活状态的样式里，也会导致动画不生效。

修复方案 #

我们用opacity（透明度）结合visibility（可见性）替代display，同时正确配置过渡规则：

1. 调整遮罩的初始样式

.afterDim {
  /* 保留你的定位、背景等基础样式 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  
  /* 关键：初始隐藏状态 + 定义过渡属性 */
  opacity: 0;
  visibility: hidden;
  /* 指定要过渡的属性、时长和动画曲线，可按需调整 */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

2. 修改激活状态的样式

.afterDim.active {
  opacity: 1;
  visibility: visible;
}

为什么这样有效？ #

• opacity是支持平滑过渡的数值属性，从0到1的变化会自然触发淡入动画；
• visibility: hidden让元素不可见但保留布局（避免display: none的瞬间切换），配合过渡属性，它会和opacity同步变化，确保动画结束后元素才完全可见；
• 把transition定义在初始样式里，浏览器才能提前监听这些属性的变化并执行过渡动画。

额外注意事项 #

• 确保你的JS逻辑是切换.active类，而不是直接修改display属性；
• 如果遮罩被其他元素遮挡，可以加上z-index: 999（或更高值）确保层级正确。

这样调整后，遮罩的显示/隐藏就能拥有平滑的过渡效果，同时完全保留原本的遮罩功能。

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