个人中心
gpt4 book ai didi

javascript - CSS Grid 在现有网格元素之上填充动画并占据整个视口(viewport)

转载 作者：行者123 更新时间：2023-12-04 15:38:23 25 4
gpt4 key购买 nike

注意:我最好在寻找 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 单击其中一个按钮元素时触发动画，基本上相当于百叶窗或类似于从屏幕顶部到底部的百叶窗的东西。

这是代码，我很抱歉，因为我真的无法让它在像 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 而不会破坏网格布局中的任何内容？基本上，这张图片: enter image description here

    最佳答案

    您可以将 div 添加到站点 HTML 的末尾，就在带有以下 CSS 的结束标记之前。

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

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

    关于javascript - CSS Grid 在现有网格元素之上填充动画并占据整个视口(viewport)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59325505/

    25 4 0
    文章推荐： javascript - 可以从一系列 promise 中删除 promise 吗？
    文章推荐： Lua CLI 安装 - 如何让终端命令 'lua' 在 OSX 上运行？
    文章推荐： Angular 8 HTTP 拦截器中断订阅
    文章推荐： java - 如何从一组对象生成组合？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com