个人中心
gpt4 book ai didi

javascript - 如何制作单击按钮时显示的加载动画？它应该占据全屏并且应该从右到左并消失

转载 作者：行者123 更新时间：2023-12-04 17:18:19 25 4
gpt4 key购买 nike

我确实有一种感觉，与正面的相比，这篇帖子会得到更多的负面回应，但没关系，一个包含正确答案的回应是值得的!

好吧，这个功能有点难以用语言来解释。每当单击导航栏中的按钮时，我想添加一个加载动画。它应该占据 100vh 的高度和 100vw 的宽度，并且应该从右到左然后消失。 (需要 CSS 和 js 方面的帮助，也许还有 HTML)

我建议查看 https://www.jacekjeznach.com使用笔记本电脑。当您单击位于网站左侧的主导航栏中的任何选项时，您可以看到非常酷的加载动画。我知道如果不成为 Web 开发方面的专家，我无法做出准确的效果。我什至查看了他投资组合的 GitHub 存储库，但那里没有 index.html。不过有很多 .jsx 文件 (ReactJS)。

我知道 HTML、CSS、JS 的基础知识，并且从未使用过任何框架(自从我开始学习网络开发以来还不到 2 个月)，但我需要帮助完成这个元素，因为这是一项大学作业。我选择制作一个电子学习网站，类似于这个人教的内容(使用 webflow 和一些后端工具，如 MemberStack、Airtable 和 Zapier):https://www.youtube.com/watch?v=1-_rGcBQLzE&list=PL23ZvcdS3XPINPbP6y06tcLY_rZLi8euf

我可以使用任何框架，但不允许我使用任何网站 build 工具(如果我忽略说明并使用它，我无法解释复杂的 javascript 代码)。连接到后端是一个加分点，但不是必需的。目前我只是在做网站的基础主页，它的代码是:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <style>
    .slide {
      width: 97vw;
      height: 97vh;
      margin: auto;
    }
    .wrapper {
      display: flex;
      flex-direction: row;
      width: 500vw;
      transform: rotate(90deg) translateY(-97vh);
      transform-origin: top left;
    }
    .one {
      background: #efdefe;
    }
    .two {
      background: #a3f3d3;
    }
    .three {
      background: rgb(245, 228, 228);
    }
    .four {
      background: #ffddcc;
    }
    .five {
      background: rgb(245, 241, 225);
    }
    .outer-wrapper {
      width: 97vh;
      height: 97vw;
      margin: auto;
      transform: rotate(-90deg) translateX(-97vh);
      transform-origin: top left;
      overflow-y: scroll;
      overflow-x: hidden;
      position: absolute;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    ::-webkit-scrollbar {
      display: none;
    }
    .wrap-class {
      margin-left: 1vw;
      display: flex;
      align-items: middle;
      justify-content: space-around;
      height: 100vh;
      width: 10vw;
      align-content: space-between;
      justify-content: center;
      position: fixed;
      flex-direction: column;
      vertical-align: center;
    }
    /*Code for the horizontal navbar on left side: */
    .navbar {
      width: 10vw;
      height: auto;
    }
    .margin1vh {
      margin-top: 0.7vh;
      margin-bottom: 0.7vh;
    }
    a:-webkit-any-link {
      text-decoration: none;
      color: white;
      padding: 1vw;
      padding-left: 0;
      display: block;
      /* padding: 3vh 1vw 3vh 1; */
      height: 100%;
      width: 100%;
    }
    button {
      background-color: black;
      display: block;
      width: 100%;
      box-shadow: inset 2px 2px black, 4px 4px 0 grey;
    }
    button:hover {
      transform: scale(1.1);
    }
    html {
      background-color: black;
      /* filter: invert(1); */
      scroll-behavior: smooth;
    }
    /*This code allow us to add linear gradient to a text*/
    p,
    h1 {
      display: block;
      margin-left: 31%;
      margin-top: 5000px !important;
      max-width: 1vw;
      background: rgb(2, 0, 36);
      background: radial-gradient(circle,
          rgba(2, 0, 36, 1) 0%,
          rgba(165, 106, 108, 1) 0%,
          rgba(175, 99, 99, 1) 0%,
          rgba(148, 116, 123, 1) 0%,
          rgba(91, 153, 175, 1) 0%,
          rgba(62, 172, 200, 1) 0%,
          rgba(194, 226, 162, 1) 0%,
          rgba(0, 212, 255, 1) 0%,
          rgba(18, 255, 21, 1) 14%,
          rgba(230, 65, 87, 1) 29%,
          rgba(194, 185, 52, 1) 46%,
          rgba(43, 83, 210, 1) 64%,
          rgba(59, 221, 55, 1) 80%,
          rgba(222, 85, 217, 1) 92%);
      -webkit-background-clip: text;
      background-clip: text;
      /*for compatibility with safari browser*/
      -webkit-text-fill-color: transparent;
      display: inline;
      background-size: 300%;
      animation: bg-animation 17s infinite;
    }
    @keyframes bg-animation {
      0% {
        background-position: left;
      }
      50% {
        background-position: right;
      }
      100% {
        background-position: left;
      }
    }
    /*Now, let's add the animation that happens when a button of fixed position is clicked: */
    .animation-on-click {
      min-width: 100vw;
      min-height: 100vh;
      background-color: black;
      animation-name: animate;
      animation-duration: 2s;
      animation-iteration-count: 1;
      overflow: visible;
    }
    @keyframes animate {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  </style>
</head>

<body>
  <div class="outer-wrapper">
    <div class="wrapper">
      <div class="slide one" id="one">
        <div>
          <br />
          <br />
          <h1>Welcome to the website</h1>
        </div>
      </div>
      <div class="slide two" id="two">
        <div>
          <br />
          <br />
          <h1>Welcome to the eLearning website</h1>
        </div>
      </div>
      <div class="slide three" id="three"></div>
      <div class="slide four" id="four"></div>
      <div class="slide five" id="five"></div>
    </div>
  </div>
  <div class="wrap-class">
    <div class="navbar">
      <button>
        <a href="#one" onclick="clicked()">Home</a>
      </button>
      <div class="margin1vh"></div>
      <button>
        <a href="#two">About</a>
      </button>
      <div class="margin1vh"></div>
      <button>
        <a href="#three">Website</a>
      </button>
      <div class="margin1vh"></div>
      <button>
        <a href="#four">Support</a>
      </button>
      <div class="margin1vh"></div>
      <button>
        <a href="#five" style="scroll-behavior: smooth !important">Contact</a>
      </button>
    </div>
  </div>
  <script>
    function clicked() {
      var element = document.getElementById("one");
      element.classList.add("animation-on-click");
      setTimeout(function () {
        element.classList.remove("animation-on-click");
      }, 2000);
    }
  </script>
</body>
</html>

我只需要一个加载动画(没有加载栏也应该可以)，但它应该在整个屏幕上完成。我想我可能会将 CSS horizo​​ntal flexbox 中所有元素的背景颜色更改为黑色，因为黑色是最好的背景，它允许我更改 .slide 类的宽度和高度属性以及 97vw、97vh 的 translateX 和 translateY 函数到 100vw，100vh(因为它们在原始代码中)

顺便说一句，我已经在此处的 HTML 文件中合并了 CSS 和 JS 文件的代码，以便能够在 StackOverflow 上共享此处的代码。您可以访问https://github.com/shubham-garg1/web-project检查 GitHub 代码。我还在网上发布了到目前为止所做的工作，所以你可以去 http://www.elearningweb.tk并检查源文件。

感谢任何帮助，谢谢。

最佳答案

如果您只想要一个微调器，它们实际上很容易实现，但是“加载”动画应该与“加载”过程相关联。在不做任何假设的情况下，让我们考虑一些 native Javascript Ajax 调用...

var xmlhttp = new XMLHttpRequest();

document.getElementById("myLoader").style.display = "block";
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == XMLHttpRequest.DONE) {   
    if (xmlhttp.status == 200) {
      document.getElementById("myLoader").style.display = "none";
    }
  }
};

xmlhttp.open("GET", "https://www.httpbin.org/get", true);
xmlhttp.send();

你可以在你的 myLoader div 中添加一个动画...如果你想有点花哨，你可以在加载后使用 Javascript 来制作动画。

让我们获取一些代码:我将从 https://www.w3schools.com/howto/howto_css_flip_card.asp 获取它.这只是悬停时的卡片翻转，但我删除了悬停部分。

这里的重要部分是 CSS 的 flip-card-inner 部分。它将指示 Javascript 动画过程应该花费多长时间。如果您想要更长的时间，只需调整 transition 值即可。

JsFiddle: https://jsfiddle.net/L1fk0nhm/ 

<style>
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; 
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
</style>
<div class="flip-card">
  <div id="myLoader" class="flip-card-inner">
    <div class="flip-card-front">
       I'm hiding stuff that's loading!
    </div>
    <div id="loadedStuff" class="flip-card-back">

    </div>
  </div>
</div>

我们实际上可以让它在加载时翻转，在元素内部加载后使用 Javascript。

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == XMLHttpRequest.DONE) {   
    if (xmlhttp.status == 200) {
      document.getElementById("loadedStuff").innerHTML = xmlhttp.responseText;
      animatedCardRotation(document.getElementById("myLoader"), 0, 180);
    }
  }
};

xmlhttp.open("GET", "https://www.httpbin.org/get", true);
xmlhttp.send();

function animatedCardRotation (Element, startDegree, endDegree) {
  if(startDegree < endDegree ) {
    startDegree += 10;
    Element.style.transform = `rotateY(${startDegree}deg)`;
    requestAnimationFrame( () => this.animatedCardRotation(Element, startDegree, endDegree) );
  }
}

在这里结合 requestAnimationFrame 确实给你的 CSS 动画增加了很多。您几乎可以在此处进行任何类型的 CSS 转换，如果您有分块加载的内容，它可以帮助您构建非常准确的“加载栏”。

关于javascript - 如何制作单击按钮时显示的加载动画？它应该占据全屏并且应该从右到左并消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67876618/

25 4 0
文章推荐： css - Bootstrap 样式未正确应用于应用程序中的所有元素
文章推荐： python - 通过conda安装特定版本的spyder
文章推荐： c - 使用 DT_FILTER 从 DSO 隐藏符号
文章推荐： firebase - campaign_details 事件未记录在 firebase 中
行者123
个人简介

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

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