javascript - 启动画面无法正常工作

Question

我正在尝试制作一个 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);
});'

Answer 1

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