仅用CSS/SASS实现弹窗仅可见时淡出的问题求助

首先咱们来揪出问题根源：当大窗口用户加载页面时，你的@media screen and (min-width: $min-width)选择器会匹配成功，触发fade_out动画，但这个动画的起始状态是opacity:1——哪怕你默认把弹窗设为隐藏，动画执行的瞬间还是会先跳到opacity:1，再淡出到0，这就导致了那讨厌的闪烁。

要纯CSS/Sass解决这个问题，我们有两个靠谱方向：优化关键帧动画逻辑，或者改用transition（更适合这种状态切换场景）。

方案一：优化关键帧动画逻辑 #

先给弹窗设置默认隐藏状态，从根源避免初始加载时显示：

.app-screen {
  opacity: 0; /* 默认完全隐藏 */
  visibility: hidden; /* 可选：避免弹窗占据页面空间 */
}

然后修改媒体查询，让动画只在窗口尺寸切换时触发，初始加载时大窗口直接保持隐藏不执行动画：

/* 窗口小于$min-width时：触发淡入动画 */
@media screen and (max-width: $min-width - 1) {
  .app-screen {
    visibility: visible;
    -webkit-animation: fade_in 0.5s forwards;
    animation: fade_in 0.5s forwards;
  }
}

/* 窗口大于等于$min-width时：仅当窗口从窄变宽时触发淡出 */
@media screen and (min-width: $min-width) {
  .app-screen {
    -webkit-animation: fade_out 0.5s forwards;
    animation: fade_out 0.5s forwards;
  }
}

/* 补全标准前缀的动画定义 */
@-webkit-keyframes fade_in {
  0% { opacity: 0; }
  100% { opacity: 1; visibility: visible; }
}
@keyframes fade_in {
  0% { opacity: 0; }
  100% { opacity: 1; visibility: visible; }
}

@-webkit-keyframes fade_out {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes fade_out {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

不过这个方案仍有极小概率出现初始闪烁（比如CSS加载顺序导致动画先于默认样式生效），更稳妥的是用下面的transition方案。

方案二：改用transition实现平滑切换 #

transition只会在元素状态变化时触发，初始加载时如果默认状态是隐藏，就不会有动画触发，完美解决闪烁问题：

.app-screen {
  opacity: 0;
  visibility: hidden;
  /* 同时过渡透明度和可见性，保证动画连贯 */
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 窗口小于$min-width时：显示弹窗 */
@media screen and (max-width: $min-width - 1) {
  .app-screen {
    opacity: 1;
    visibility: visible;
  }
}

/* 窗口大于等于$min-width时：隐藏弹窗 */
@media screen and (min-width: $min-width) {
  .app-screen {
    opacity: 0;
    visibility: hidden;
  }
}

这个方案代码更简洁，也更符合CSS状态切换的设计逻辑，非常推荐使用。

额外小提示 #

• 记得添加标准的animation/transition属性，不要只写webkit前缀，保证多浏览器兼容。
• 如果弹窗需要始终占据页面空间，可以去掉visibility属性，只保留opacity即可；如果要彻底移除弹窗的交互能力，visibility: hidden比display: none更适合过渡动画（因为display属性无法实现平滑过渡）。

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