我似乎有一个问题，我的网页预加载程序的不透明性，当它加载，网页内容显示在后面，而不是隐藏。
我不确定是什么问题，还是我的代码出错了？

<div class="loader">
      <div class="name-load">
        <h2 data-text="NedhalM .">NedhalM .</h2>
      </div>
    </div>

以及用于预加载页面和h2动画的CSS

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  transition: opacity 0.75s 4s, visibility 0.75s 4s;
}

.loader--hidden {
  opacity: 0;
  visibility: hidden;
}

沿着名字本身的动画，这是我用的Javascript

window.addEventListener("load", () => {
    const loader = document.querySelector(".loader");

    loader.classList.add("loader--hidden");

    loader.addEventListener("transitionend", () => {
        document.body.removeChild(loader);
    });
});