声波动画页面加载器

Question

我有一个看起来像声波的页面加载器，但我无法让它在页面加载后消失。

.preload {

    z-index: 10001;

    position: fixed;

    top: 0;

    width: 100%;

    height: 100vh;

    background-color: #121212;

    display: flex;

    justify-content: center;

    align-items: center;

}

.bar {

    background: #aa1515;

    bottom: 1px;

    height: 3px;

    position: relative;

    width: 3px;      

    animation: sound 0ms -800ms linear infinite alternate;

}

 

@keyframes sound {

    0% {

        opacity: .35;

        height: 3px; 

    }

    100% {

        opacity: 1;       

        height: 28px;        

    }

}

.bar:nth-child(1)  { left: 1px;  animation-duration: 474ms; }

.bar:nth-child(2)  { left: 5px;  animation-duration: 433ms; }

.bar:nth-child(3)  { left: 9px;  animation-duration: 407ms; }

.bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }

.bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }

.bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }

.bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }

.bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }

.bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }

.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }

.preload-finish {

    opacity: 0;

    pointer-events: none;

}

window.addEventListener('load', () => {

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

    preload.classList.add('preload-finish');

});

当某些内容加载时，它确实会首先出现，但在页面加载后无法使其消失。我究竟做错了什么？

Answer 1

您必须为此事件监听器传递一个争论 (e)&nbsp; window.addEventListener('load',(event)=>{&nbsp; &nbsp;...&nbsp; &nbsp;...&nbsp; });如果您仍然收到错误，那么这是因为某些文件尚未加载或未找到。转到 chrome 开发工具并在控制台中检查是否显示任何错误。它可以是静态文件，如图像、css 文件等......另外，如果您的 javascript 中有任何错误，那么load事件也不会触发我尝试了你的演示预加载器 👍window.addEventListener('load',(e)=>{&nbsp; &nbsp; $("#preloader").fadeOut();&nbsp; });#preloader {&nbsp; position: fixed;&nbsp; z-index: 1999;&nbsp; display: -webkit-box;&nbsp; display: -ms-flexbox;&nbsp; display: flex;&nbsp; -webkit-box-align: center;&nbsp; -ms-flex-align: center;&nbsp; align-items: center;&nbsp; -webkit-box-pack: center;&nbsp; -ms-flex-pack: center;&nbsp; justify-content: center;&nbsp; height: 100vh;&nbsp; width: 100vw;&nbsp; background-color: #fff;}.bar {&nbsp; &nbsp; background: #aa1515;&nbsp; &nbsp; bottom: 1px;&nbsp; &nbsp; height: 3px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 3px;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; animation: sound 0ms -800ms linear infinite alternate;}&nbsp;@keyframes sound {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; opacity: .35;&nbsp; &nbsp; &nbsp; &nbsp; height: 3px;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; height: 28px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }}.bar:nth-child(1)&nbsp; { left: 1px;&nbsp; animation-duration: 474ms; }.bar:nth-child(2)&nbsp; { left: 5px;&nbsp; animation-duration: 433ms; }.bar:nth-child(3)&nbsp; { left: 9px;&nbsp; animation-duration: 407ms; }.bar:nth-child(4)&nbsp; { left: 13px; animation-duration: 458ms; }.bar:nth-child(5)&nbsp; { left: 17px; animation-duration: 400ms; }.bar:nth-child(6)&nbsp; { left: 21px; animation-duration: 427ms; }.bar:nth-child(7)&nbsp; { left: 25px; animation-duration: 441ms; }.bar:nth-child(8)&nbsp; { left: 29px; animation-duration: 419ms; }.bar:nth-child(9)&nbsp; { left: 33px; animation-duration: 487ms; }.bar:nth-child(10) { left: 37px; animation-duration: 442ms; }.preload-finish {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; pointer-events: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="preloader"><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div><button>h4llo </button>

Answer 2

虽然我不知道实际发生这种情况的确切原因，但您对各个栏的 CSS 定义似乎干扰了其父容器类.preload到.preload-finish.您可以通过在切换到类时向栏添加空类定义来解决此问题preloader-finish。这是一个例子：document.getElementById("clickMe").addEventListener("click", function() {&nbsp; var preload = document.querySelector('.preload');&nbsp; preload.classList.add('preload-finish');&nbsp; var bars = document.getElementsByClassName("bar");&nbsp; for (var a = bars.length - 1; a > 0; a--) {&nbsp; &nbsp; bars[a].classList.add('emptyBar');&nbsp; }});.preload {&nbsp; position: fixed;&nbsp; top: 0;&nbsp; width: 100%;&nbsp; height: 100vh;&nbsp; background-color: #121212;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}.bar {&nbsp; background: #aa1515;&nbsp; bottom: 1px;&nbsp; height: 3px;&nbsp; position: relative;&nbsp; width: 3px;&nbsp; animation: sound 0ms -800ms linear infinite alternate;}@keyframes sound {&nbsp; 0% {&nbsp; &nbsp; opacity: .35;&nbsp; &nbsp; height: 3px;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; height: 28px;&nbsp; }}.bar:nth-child(1) {&nbsp; left: 1px;&nbsp; animation-duration: 474ms;}.bar:nth-child(2) {&nbsp; left: 5px;&nbsp; animation-duration: 433ms;}.bar:nth-child(3) {&nbsp; left: 9px;&nbsp; animation-duration: 407ms;}.bar:nth-child(4) {&nbsp; left: 13px;&nbsp; animation-duration: 458ms;}.bar:nth-child(5) {&nbsp; left: 17px;&nbsp; animation-duration: 400ms;}.bar:nth-child(6) {&nbsp; left: 21px;&nbsp; animation-duration: 427ms;}.bar:nth-child(7) {&nbsp; left: 25px;&nbsp; animation-duration: 441ms;}.bar:nth-child(8) {&nbsp; left: 29px;&nbsp; animation-duration: 419ms;}.bar:nth-child(9) {&nbsp; left: 33px;&nbsp; animation-duration: 487ms;}.bar:nth-child(10) {&nbsp; left: 37px;&nbsp; animation-duration: 442ms;}.emptyBar {}.preload-finish {&nbsp; opacity: 0;&nbsp; pointer-events: none;}<div class="preload">&nbsp; <div class="bar"></div>&nbsp; <div class="bar"></div>&nbsp; <div class="bar"></div>&nbsp; <div class="bar"></div>&nbsp; <div class="bar"></div>&nbsp; <div class="bar"></div>&nbsp; <div class="bar"></div>&nbsp; <div class="bar"></div>&nbsp; <div class="bar"></div>&nbsp; <div class="bar"></div></div><button style="position:absolute" id="clickMe">click me</button>