CSS：仅在可见时淡出答案

【问题标题】：CSS: Fade out only if visibleCSS：仅在可见时淡出
【发布时间】：2018-02-01 22:58:48
【问题描述】：

我想知道是否可以仅使用 CSS 或 SASS 来解决这个问题。我有一个网站，如果浏览器窗口的宽度小于 $min-width 像素，该弹出窗口会淡入，否则会淡出并保持隐藏状态。

@media screen and (min-width: $min-width) {
    .app-screen {
        -webkit-animation: fade_out 0.5s forwards;
    }
}

@media screen and (max-width: $min-width - 1) {
    .app-screen {
        -webkit-animation: fade_in 0.5s forwards;
    }
}

编辑：抱歉，忘记发布我的动画了：

@-webkit-keyframes fade_in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

问题在于，当具有大窗口的用户进入站点时，弹出窗口会出现并淡出。默认情况下，弹出窗口在 css 中是隐藏的，但由于满足淡出条件，因此会启动淡出动画。但如果弹出窗口已经隐藏，我不希望它启动。

在我的淡出动画或我错过的动画属性之前，是否有一些 SASS 解决方案，例如“@if opacity > 0”？

【问题讨论】：

你的动画是做什么的，修改了哪些属性？
@CBroe 抱歉，更新了问题
我不明白这里的目标。对于小型和大型浏览器，弹出窗口应该何时出现和消失？
@andi 当浏览器窗口小于 $min-width 时弹出窗口淡入，当窗口较大时淡出
“弹出窗口默认隐藏在 css 中” - 它是如何隐藏的？如果你只是使用display:none 隐藏它，那么动画可以整天改变不透明度，如果感觉的话，它不会有任何可见的效果。

标签： css sass css-animations

【解决方案1】：

我会用 CSS3 过渡而不是动画来做到这一点。

/* Assuming $min-width: 700px; */

.app-screen {
  transition: opacity 0.5s ease-in;
}

@media screen and (min-width: 700px) {
    .app-screen {
        opacity: 0;
    }
}

@media screen and (max-width: 699px) {
    .app-screen {
        opacity: 1;
    }
}

<div class="app-screen">
  <p>You can only see me on small screens.</p>
</div>

请注意，我拥有它的方式要求您使用与淡入和淡出相同的缓动功能（有些人更喜欢以一种方式缓入而另一种方式缓出）。

【讨论】：

谢谢！完全按照我的意愿工作。

【解决方案2】：

我提出了一个非常简单的方法。

.app-screen {
    opacity: 0;
    transition: opacity 0.5s;
}
@media screen and (max-width: $min-width) {
    table {
        opacity: 1;
    }
}

这样，如果最初加载的屏幕大于@min-width，则不会发生任何事情，如果较小，屏幕会淡入。当屏幕被拖得更大或更小时，屏幕会相应地淡入或淡出。

干杯

【讨论】：