代码在 Codepen 中工作，但在浏览器中不工作答案

【问题标题】：Code working in Codepen but not in browser代码在 Codepen 中工作，但在浏览器中不工作
【发布时间】：2021-05-10 09:30:49
【问题描述】：

我制作了一个按预期工作的启动画面，可以在这个 codepen 上看到：

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

但是，当我将该代码复制到我的项目中时，启动画面在 3 秒后不再消失。我在想某处有冲突的代码，但我没能发现它

我的代码：

'/ ///HTML


<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" `enter code here`integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
        <link rel="stylesheet" href="css/kayportfolio.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
    </head>
    <body>

        <div id="container">

            <header>
                <nav>
                    <img id="bun" src="images/kay logo.png">
                </nav>
            </header>

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

            <main>
                <i class="fas fa-caret-up"></i>
                <img id="myth" src="images/mythologyproj.png">
                <i class="fas fa-caret-down"></i>
                <img id="fingerguns" src="images/fingerguns.png">
            </main>

            <footer>
            </footer>

        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
        <script src="js/kayportfolio.js" async defer></script>
    </body>
</html>



///SASS


$purple: #a9aaff;



body {
    margin: 0;
    padding: 0;
}

#container {
    height: 100vh;
    display: grid;
    grid-template-rows: 25vh 1fr 25vh;

    header {
        grid-area: 1 / 1 / 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 400px;
        }
    }

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

        img {
            width: 12.5%;
        }
    }

    .display-none {
        display: none;
    };

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

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

    main {
        grid-area: 2 / 1 / 2 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 1;

        i {
            font-size: 60px;
            margin: 20px;
            color: $purple;
        }

        i:hover {
            cursor: pointer;
        }

        #myth {
            width: 800px;
        }

        #myth:hover {
            opacity: .5;
            cursor: pointer;
        }

        #fingerguns {
            width: 400px;
            position: fixed;
            left: 5%;
            top: 49%;
        }
    }

    footer {
        grid-area: 3 / 1 / 3 / -1;
    }
}




/// JS



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

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

【问题讨论】：

嘀嘀嘀用css试过了吗？也许是一个编译问题你用什么来编译你的 sass 仔细检查一切..
最好与您的项目共享代码示例。一个问题可能是您的 .display-none 类在您的实际代码中出现在您的 .splash 类之前。
我的回答对您有帮助吗？考虑提供反馈，谢谢！

标签： javascript html css web sass

【解决方案1】：

必须将 Sass 编译为 CSS 才能让您的浏览器理解它，在 VS 代码中，有一些方便的扩展需要这样做，例如 live sass 编译器。

点击底部的 watch sass 按钮（或以任何你想要的方式编译）。

可以看到编译器在项目中添加了CSS版本。

现在只需将 CSS 文件包含在您的 html 中，例如（如果 CSS 文件位于同一文件夹中）：

<link rel="stylesheet" href="./style.css" >

别忘了把你的 JS 代码也放在<script></script> 标签中，或者创建一个单独的文件并包含它。

<script>
  const splash = document.querySelector('.splash');

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

【讨论】：