Javascript 如何制作在单击按钮时显示的加载动画？它应该占据整个屏幕&；应该是从右向左&；消失_Javascript_Html_Css_Reactjs_Dom

Javascript 如何制作在单击按钮时显示的加载动画？它应该占据整个屏幕&；应该是从右向左&；消失

javascript html css reactjs dom

Javascript 如何制作在单击按钮时显示的加载动画？它应该占据整个屏幕&；应该是从右向左&；消失,javascript,html,css,reactjs,dom,Javascript,Html,Css,Reactjs,Dom,我有一种感觉，这篇文章会得到更多的消极回应，而不是积极的回应，但没关系，一个包含正确答案的回应是值得的好的，这个功能有点难以用语言解释。我想在单击导航栏中的按钮时添加加载动画。它应该占据100vh的高度和100vw的宽度，并且应该从右到左然后消失。（需要CSS和js方面的帮助，也可能需要HTML）我建议用笔记本电脑结账。当您单击位于网站左侧的主导航栏中的任何选项时，您可以看到正在进行的非常酷的加载动画我知道，如果不成为一名网络开发专家，我就无法取得确切的效果。我甚至查看了他的投资组合的Gi

我有一种感觉，这篇文章会得到更多的消极回应，而不是积极的回应，但没关系，一个包含正确答案的回应是值得的

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

我建议用笔记本电脑结账。当您单击位于网站左侧的主导航栏中的任何选项时，您可以看到正在进行的非常酷的加载动画我知道，如果不成为一名网络开发专家，我就无法取得确切的效果。我甚至查看了他的投资组合的GitHub回购协议，但那里没有index.html。但是有很多.jsx文件（ReactJS）

我知道HTML、CSS、JS的基础知识，并且从未使用过任何框架（从我开始学习web开发至今不超过2个月），但我需要这个项目的帮助，因为这是一个大学作业。我选择制作一个在线学习网站，与这家伙教的类似（使用webflow和一些后端工具，如MemberStack、Airtable和Zapier）：

我被允许使用任何框架，但我不被允许使用任何网站构建工具（如果我忽略了说明并使用它，我无法解释复杂的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>


文件
.幻灯片{
宽度：97vw；
高度：97vh；
保证金：自动；
}
.包装纸{
显示器：flex；
弯曲方向：行；
宽度：500vw；
变换：旋转（90度）translateY（-97vh）；
变换原点：左上角；
}
.一{
背景：#efdefe；
}
.二{
背景#a3f3d3；
}
.三{
背景：rgb（245228228）；
}
.4{
背景:#ffddcc；
}
.5{
背景：rgb（245241225）；
}
.外包装{
宽度：97vh；
身高：97vw；
保证金：自动；
变换：旋转（-90度）translateX（-97vh）；
变换原点：左上角；
溢出y：滚动；
溢出x：隐藏；
位置：绝对位置；
滚动条宽度：无；
-ms溢出样式：无；
}
：-webkit滚动条{
显示：无；
}
.包装类{
左边距：1vw；
显示器：flex；
对齐项目：中间对齐；
证明内容：周围的空间；
高度：100vh；
宽度：10vw；
对齐内容：之间的空间；
证明内容：中心；
位置：固定；
弯曲方向：立柱；
垂直对齐：居中；
}
/*左侧水平导航栏的代码：*/
navbar先生{
宽度：10vw；
高度：自动；
}
margin1vh先生{
边际上限：0.7vh；
保证金底部：0.7vh；
}
答：-webkit任何链接{
文字装饰：无；
颜色：白色；
填充物：1vw；
左侧填充：0；
显示：块；
/*填充：3vh 1vw 3vh 1*/
身高：100%；
宽度：100%；
}
钮扣{
背景色：黑色；
显示：块；
宽度：100%；
盒影：镶嵌2px 2px黑色，4px 4px 0灰色；
}
按钮：悬停{
转换：比例（1.1）；
}
html{
背景色：黑色；
/*过滤器：反转（1）*/
滚动行为：平滑；
}
/*此代码允许我们向文本添加线性渐变*/
P
h1{
显示：块；
左边缘：31%；
利润上限：5000px！重要；
最大宽度：1vw；
背景：rgb（2,0,36）；
背景：径向梯度（圆形，
rgba（2,0,36,1）0%，
rgba（165、106、108、1）0%，
rgba（175,99,99,1）0%，
rgba（148116123,1）0%，
rgba（91153175,1）0%，
rgba（621722001）0%，
rgba（1942261621）0%，
rgba（0，212，255，1）0%，
rgba（1825521,1）14%，
rgba（230,65,87,1）29%，
rgba（19418552 1）46%，
rgba（43,83,210,1）64%，
rgba（59,221,55,1）80%，
rgba（222,85,217,1）92%；
-webkit背景剪辑：文本；
背景剪辑：文本；
/*与safari浏览器兼容*/
-webkit文本填充颜色：透明；
显示：内联；
背景大小：300%；
动画：bg动画17s无限；
}
@关键帧bg动画{
0% {
背景位置：左；
}
50% {
背景位置：右；
}
100% {
背景位置：左；
}
}
/*现在，让我们添加单击固定位置按钮时发生的动画：*/
.点击动画{
最小宽度：100vw；
最小高度：100vh；
背景色：黑色；
动画名称：动画；
动画持续时间：2秒；
动画迭代次数：1；
溢出：可见；
}
@关键帧设置动画{
0% {
转化：translateX（100%）；
}
100% {
转化：translateX（-100%）；
}
}




欢迎访问该网站




欢迎访问在线学习网站
函数单击（）{
var元素=document.getElementById（“一”）；
元素。类列表。添加（“单击时的动画”）；
setTimeout（函数（）{
element.classList.remove（“单击时的动画”）；
}, 20