时间戳

首页 > 解决方案 > 代码在 Codepen 中工作，但在浏览器中不工作

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

问题描述

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

标签： javascripthtmlcsswebsass

解决方案

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

现场 sass 编译器

单击底部的 watch sass 按钮（或以您想要的任何方式编译）。 看粗鲁

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

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>

推荐阅读