在 Tailwind CSS / Javascript 中页面加载动画后页面内容不可见

Question

正如标题所示，在我的一个项目中实现简单的页面加载动画时遇到问题。

预期结果是：

• 加载动画/覆盖在页面加载完成后消失

目前的结果是：

• Overlay 的不透明度变为 0（从而隐藏了加载动画），但页面内容不可见

这是模拟页面加载器和一些模拟页面内容的简化示例代码。

<!-- Page Loader -->
<!-- Loader Wrapper -->
<div class="bg-blue-200 flex justify-center items-center transition-all opacity-100 ease-in-out duration-1000 h-screen" id="page-loader">
  <!-- Loader -->
  <div class="absolute top-1/2 left-1/2 -ml-24 -mt-3">
    <p>YOUR CONTENT IS LOADING<p>
  </div>
</div>


<!-- Page Content -->
<div>
  <!-- Simulated Navbar that is not visible even after page loader is done -->
  <nav class="bg-red-200 fixed w-full font-source font-extralight">
    <!-- Logo -->
    <p>LOGO<p>
  </nav>
</div>

以上和以下示例的Javascript：

const loader = document.getElementById('page-loader')

// Once page is finished loading start the transition to page content. Set timeout is only used here to simulate a page load time of 3 seconds.
window.addEventListener('load', function(e) {
    setTimeout(() => { loader.classList.replace('opacity-100', 'opacity-0'); }, 3000);
})

我也试过这个：

<!-- Page Loader Wrapper -->
<div class="flex justify-center items-center opacity-100 transition-all ease-in-out duration-1000" id="page-loader">
<!-- Loader -->
  <div class="sk-cube-grid absolute top-1/2 left-1/2 -ml-8 -mt-8">
    <p>YOUR CONTENT IS LOADING</p>
  </div>
</div>

<!-- Simulated navbar which bleeds through -->
<nav class="bg-blue-200 fixed w-full">
  <div class="flex max-w-2xl mx-auto items-center bg-red-300">
    <div class="flex justify-start">
      <p>Logo</p>
    </div>
  </div>
</nav>

但是这也不起作用，因为页面内容通过页面加载覆盖“流血”。

Answer 1

您可以通过为您的 page-loader div 提供 3 个新属性来使其工作：

• absolute - 这使 div 脱离了正常的页面流，允许我们将其定位在页面顶部。
• inset-0 - 这与给 div top: 0、bottom: 0、left: 0、right: 0 相同。这实际上将 div 的每个边缘固定到页面的一侧。
• z-50 - 元素的z-index 控制元素的垂直顺序。为 div 指定 z-index 或 50 会将其置于顶部，使其显示在页面其余部分的顶部。

<div class="absolute inset-0 z-50 bg-blue-200 transition-all opacity-100 ease-in-out duration-1000 h-screen" id="page-loader">

https://jsfiddle.net/u5eq3po4/