Question

我想知道是否有可能只用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中，但由于符合淡出条件，因此启动了fade_out动画。但如果弹出窗口已被隐藏，我不希望它开始。

是否有一些SASS解决方案，如＆＃34; @if opacity＆gt; 0＆＃34;我可以在我的淡出动画或动画属性之前错过吗？

Answer 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>

请注意，我拥有它的方式要求你使用相同的缓动函数淡出淡出（有些人喜欢以一种方式轻松一点，而另一种方式则放松）。

Answer 2

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

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

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

干杯

CSS：仅在可见时淡出

2 个答案: