在现有网格元素上方的CSS网格填充动画并占据整个视口

Question

注意：我最好在寻找香草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单击这些按钮元素之一时触发动画，从本质上讲，这相当于一个百叶窗或类似于从屏幕顶部到底部的百叶窗。

这是代码，很抱歉，因为我真的无法在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顶部覆盖div而不破坏网格布局中的任何内容？基本上，这张图片：

Answer 1

您可以将div添加到网站HTML的末尾，紧随以下CSS的结束标记之前。

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

应该创建一个叠加层div，您可以在JS中使用QuerySelect对其进行动画处理。

在现有网格元素上方的CSS网格填充动画并占据整个视口

问题描述投票：6回答：1

1个回答

最新问题

在现有网格元素上方的CSS网格填充动画并占据整个视口

问题描述 投票：6回答：1

1个回答

最新问题

问题描述投票：6回答：1