Javascript 声波动画页面加载器

我有一个声波页面加载程序，但我不能让它在页面加载后消失

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

当加载某些内容时，它确实会首先出现，但一旦加载页面，它就无法使其消失。

---

我做错了什么？

您必须为此事件传递一个参数（e）

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

如果仍然出现错误，则是因为某些文件尚未加载或未找到

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

它可能是一个静态文件，如图像、css文件等

另外，如果javascript中有任何错误，则不会触发

load

事件

---

我为演示试用了您的预加载程序，虽然我不知道实际发生这种情况的确切原因，但您对单个条的CSS定义似乎干扰了其父容器的

.preload

类切换为

.preload finish

在切换到

预加载程序finish

类时，可以通过向条形图中添加空类定义来解决此问题

下面是一个例子：

document.getElementById（“clickMe”）.addEventListener（“click”，function（））{
var preload=document.querySelector（'.preload'）；
preload.classList.add（'preload-finish'）；
var bar=document.getElementsByClassName（“bar”）；
对于（var a=bar.length-1；a>0；a--）{
bars[a].classList.add（'emptyBar'）；
}
});
.preload{
位置：固定；
排名：0；
宽度：100%；
高度：100vh；
背景色：#121212；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.酒吧{
背景：#aa1515；
底部：1px；
高度：3倍；
位置：相对位置；
宽度：3倍；
动画：声音0毫秒-800毫秒线性无限交替；
}
@关键帧声音{
0% {
不透明度：.35；
高度：3倍；
}
100% {
不透明度：1；
高度：28px；
}
}
.bar:第n个孩子（1）{
左：1px；
动画持续时间：474ms；
}
.bar:第n个孩子（2）{
左：5px；
动画持续时间：433ms；
}
.bar:第n个孩子（3）{
左：9px；
动画持续时间：407ms；
}
.bar:第n个孩子（4）{
左：13px；
动画持续时间：458ms；
}
.bar:第n个孩子（5）{
左：17px；
动画持续时间：400ms；
}
.bar:第n个孩子（6）{
左：21px；
动画持续时间：427ms；
}
.bar:第n个孩子（7）{
左：25px；
动画持续时间：441ms；
}
.bar:第n个孩子（8）{
左：29px；
动画持续时间：419ms；
}
.bar:第n个孩子（9）{
左：33像素；
动画持续时间：487ms；
}
.bar:第n个孩子（10）{
左：37像素；
动画持续时间：442ms；
}
​ .emptyBar{}
.预加载饰面{
不透明度：0；
指针事件：无；
}

单击我
你能显示它的html部分吗？它只是一个10倍的内部版本。你已经尝试了
。预加载完成{display:none；}
是，没有修复it@dominus你可以运行代码片段&告诉我你还看了什么？
  window.addEventListener('load',(event)=>{
   ...
   ...
  });