CSS 现有网格元素顶部的网格填充动画并占据整个视口

Question

注意：我正在寻找 vanilla JS，因为 jQuery 不是我可以在这个项目中使用的东西

我的网格结构有点复杂：

body {
  margin: 0;
  height: 100vh;
  text-align: center;
}

.grid-container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "tl tr" "bl br";
}

.tl {
  background: #fdfdfd;
  color: #2f2f2f;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ". . . ." ". . text-tl ." ". . . button-tl";
  grid-area: tl;
}

.button-tl { 
  grid-area: button-tl;
  background: #2f2f2f;
  color: #fdfdfd;
}

.text-tl { 
  grid-area: text-tl;
}

.tr {
  background: #2f2f2f;
  color: #fdfdfd;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ". . . ." ". text-tr . ." "button-tr . . .";
  grid-area: tr;
}

.button-tr { 
  grid-area: button-tr;
  background: #fdfdfd;
  color: #2f2f2f;
}

.text-tr { grid-area: text-tr; }

.br {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "button-br . . ." ". text-br . ." ". . . .";
  grid-area: br;
}

.button-br { 
  grid-area: button-br;
  background: #2f2f2f;
  color: #fdfdfd;
}

.text-br { grid-area: text-br; }

.bl {
  background: #2f2f2f;
  color: #fdfdfd;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ". . . button-bl" ". . text-bl ." ". . . .";
  grid-area: bl;
}

.button-bl { 
  grid-area: button-bl;
    background: #fdfdfd;
  color: #2f2f2f;

}

.text-bl { grid-area: text-bl; }

<div class="grid-container">
  <div class="tl">
    <div class="button-tl">button A</div>
    <div class="text-tl">word A</div>
  </div>
  <div class="tr">
    <div class="button-tr">button B</div>
    <div class="text-tr">word B</div>
  </div>
  <div class="br">
    <div class="button-br">button C</div>
    <div class="text-br">word C</div>
  </div>
  <div class="bl">
    <div class="button-bl">button D</div>
    <div class="text-bl">word D</div>
  </div>
</div>

我想在用户使用 Anime.js 单击其中一个按钮元素时触发动画，基本上相当于 window 盲目或类似于 window 盲目从屏幕顶部到底部。

这是代码，很抱歉，因为我真的无法让它在 CodePen 等网站上运行。如果您想看我正在谈论的动画，您 package.json 中唯一需要的是 "dependencies": { "animejs":"^3.1.0"}。

import anime from '/node_modules/animejs/lib/anime.es.js';

document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    anime({
      targets: '.animationBox',
      keyframes: [{
          height: "10%"
        },
        {
          height: "20%"
        },
        {
          height: "30%"
        },
        {
          height: "40%"
        },
        {
          height: "50%"
        },
        {
          height: "60%"
        },
        {
          height: "70%"
        },
        {
          height: "80%"
        },
        {
          height: "90%"
        },
        {
          height: "100%"
        }
      ],
      duration: 2000,
      easing: 'linear'
    });
  }, 500);
});

body {
  margin: 0;
  background: #241B2F;
  height: 100vh;
}

#App {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: 100%;
}

#hiddenBox {
  height: 100%;
  width: 100%;
}

.animationBox {
  background: white;
  height: 0%;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="index.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
  <title>Anime.js</title>
</head>

<body>
  <div id="App">
    <div id="hiddenBox">
      <div class="animationBox"></div>
    </div>
  </div>
</body>
<script type="module" src="index.js"></script>

</html>

我想让那个白色的 'window blind' 向下滚动到页面上所有其他元素的顶部，但我不知道如何构建我的 HTML/CSS 以避免破坏整个页面布局。我试过：

z-index，这似乎没有完成任何事情，大概是因为z-index需要position:relative或position:absolute，这也打破了网格
display: none 和 visibility: hidden 等其他变体，但这些都不起作用，仍然导致结构混乱
将动画白色 div 移出屏幕并使用触发 onClick()

我猜 TL;DR 是：如何在不破坏网格布局的情况下将 div 覆盖在网格之上？基本上，这张图片：

Answer 1

您可以在站点 HTML 的末尾添加一个 div，就在结束标记之前，使用以下 CSS.

<div id="divname" style="
  background-color:white;
  position: fixed;
  top: 0px;
  right: 0px;
  height: 0;
  width: 100vw;">
</div>

这应该会创建一个叠加层 div，您可以在 JS 中使用 QuerySelect 来制作动画。

CSS 现有网格元素顶部的网格填充动画并占据整个视口

CSS Grid fill animation on top of existing grid elements and take up full viewport

javascript

html

css

css-grid

anime.js