页面加载时Transition Opacity失效：预加载器无法隐藏页面内容

问题分析 #

你的问题核心在于预加载器的堆叠层级不足，以及过渡时序的小瑕疵：

1. 未给预加载器设置z-index，若页面内其他元素设置了position和更高层级值，会导致预加载器被内容覆盖，无法完全遮挡页面；
2. visibility和opacity的过渡延迟设置同步，可能导致预加载器还未完全透明就提前隐藏，出现内容闪烁问题。

修复方案 #

1. 强制预加载器处于页面最顶层 #

通过添加足够高的z-index，确保预加载器能完全覆盖所有页面内容。

2. 优化过渡时序 #

调整visibility的触发延迟，让它在opacity过渡完成后再执行，避免视觉闪烁。

修改后的代码 #

HTML（无需调整） #

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

CSS（关键修改） #

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  /* 设置足够高的层级，确保在所有内容之上 */
  z-index: 9999;
  /* 调整过渡逻辑：先完成opacity淡出，再隐藏visibility */
  transition: opacity 0.75s ease 4s, visibility 0s linear 4.75s;
}

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

JavaScript（优化稳定性） #

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

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

  // 事件仅触发一次，避免重复移除节点报错
  loader.addEventListener("transitionend", () => {
    loader.parentNode?.removeChild(loader);
  }, { once: true });
});

额外提示 #

• 如果你的名称动画时长不是4秒，需要同步调整transition中的延迟数值，保证名称动画完成后再开始预加载器淡出；
• 若页面内容仍提前显示，可给初始状态的body添加overflow: hidden，在预加载器移除后再恢复，防止加载过程中滚动。

内容的提问来源于stack exchange，提问作者NedhalM