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>

我想让白色的“窗口百叶窗”向下滚动到页面上所有其他元素的顶部，但是我不知道如何构造HTML / CSS以避免破坏整个布局。我尝试过：

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

我猜是TL； DR是：如何在网格顶部覆盖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网格填充动画位于现有网格元素之上，并占据完整视口

1 个答案: