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

Question

我制作了一个按预期工作的启动画面，可以在这个 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);
});

Answer 1

Sass 必须编译为 CSS 以便您的浏览器理解它，在 VS 代码中，有一些方便的扩展需要这个，例如实时 sass 编译器。

单击底部的手表 sass 按钮（或以您想要的任何方式编译）。

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

现在只需在 html 中包含 CSS 文件，例如（如果 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>

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

问题描述

1 个解决方案

解决方案1
0 2021-02-06 10:28:34

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

问题描述

1 个解决方案

解决方案1 0 2021-02-06 10:28:34

解决方案1
0 2021-02-06 10:28:34