声波动画页面加载器

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)

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

   ...

   ...

  });

如果您仍然收到错误，那么这是因为某些文件尚未加载或未找到。

转到 chrome 开发工具并在控制台中检查是否显示任何错误。

它可以是静态文件，如图像、css 文件等......

另外，如果您的 javascript 中有任何错误，那么load事件也不会触发

我尝试了你的演示预加载器 👍

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

    $("#preloader").fadeOut();

  });

#preloader {

  position: fixed;

  z-index: 1999;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  height: 100vh;

  width: 100vw;

  background-color: #fff;

}

.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;

}

<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() {

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

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

  var bars = document.getElementsByClassName("bar");

  for (var a = bars.length - 1; a > 0; a--) {

    bars[a].classList.add('emptyBar');

  }

});

.preload {

  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;

}

.emptyBar {}

.preload-finish {

  opacity: 0;

  pointer-events: none;

}

<div class="preload">

  <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 style="position:absolute" id="clickMe">click me</button>