启动画面无法正常工作答案

【问题标题】：Splash Screen not functioning启动画面无法正常工作
【发布时间】：2021-05-10 06:54:25
【问题描述】：

我正在尝试制作一个 4 秒后消失的启动画面。我试图通过 JS 将 display-none 类添加到 splash 类来做到这一点，但是该类没有被添加，所以仍然显示启动画面。这是问题的代码：

https://codepen.io/dbake3452/pen/VwmeoGa

///HTML

<div class="splash">
      <img class="fade-in" src="images/pippinhop.png">
</div>


///SASS

.splash {
    width: 100%;
    height: 100vh;
    background-color: #a9aaff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;

    .display-none {
        display: none;
    };

    img {
        width: 12.5%;
    }
}

@keyframes fadeIn{
    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
}



///JS

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none');
 }, 4000);
});'

【问题讨论】：

标签： javascript html css sass splash-screen

【解决方案1】：

问题在于你的 CSS 定义。

.splash {
    .display-none {}
}

这个css样式的意思是，找到类为.splash的元素，然后找到它的子元素，类为.display-none，并根据样式定义对其进行样式设置。您可能希望将 SASS 代码更改为此，使其成为全局样式可以解决问题：

.display-none {
    display: none;
}
.splash {
...

或者您可以选择使用& 关键字将其设为.splash.display-none，如下所示：

.splash {
/* Your style...*/
    &.display-none {
        display: none;
    }

}

.classname1 中的&.classname2 等于.classname1.classname2 css 语法。

这是一个例子：

.classname1 {
    &.classname2 {
    /*style...*/
    }
}

在 css 中你会这样写：

.classname1.classname2 {
    /*style...*/
}

这可以描述为“找到具有.classname1和.classname2的元素，并相应地设置样式”。

我希望这会有所帮助！ :D

【讨论】：

【解决方案2】：

查看您的 Codepen，您的 JS 似乎很好，因为我确实看到了正在添加的类。如果您从“display-none”类之后删除分号，它将起作用。

【讨论】：

【解决方案3】：

SCSS 的编写方式是将 CSS 渲染为

.splash .display-none {
  display: none;
}

两个选择器之间的空间很大。

后代组合符 - 通常由单个空格 ( ) 字符 — 组合两个选择器，以便匹配的元素如果第二个选择器有祖先（父级，父母的父母，父母的父母的父母等）元素匹配第一个选择器。使用后代组合器的选择器是称为后代选择器。

（来自https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator）因此，正如其他人指出的那样，您需要分离出 display-none 类的定义。呈现的 CSS 需要如下所示：

.splash.display-none {
  display: none;
}

【讨论】：