如何制作点击按钮时显示的加载动画？它应该占据全屏并且应该从右到左并消失
Posted
技术标签:
【中文标题】如何制作点击按钮时显示的加载动画？它应该占据全屏并且应该从右到左并消失【英文标题】：How to make a loading animation that shows up when you click on a button? It should take up the full screen & should be from right to left & disappear 【发布时间】：2021-08-24 19:59:20 【问题描述】：我确实有一种感觉，与积极的帖子相比，这篇文章会得到更多的消极回应，但没关系，一个包含正确答案的回应是值得的！
好的，这个功能有点难以用语言来解释。每当单击导航栏中的按钮时，我想添加加载动画。它应该占据 100vh 的高度和 100vw 的宽度，并且应该从右到左然后消失。 （需要 CSS 和 js 方面的帮助，也可能是 html）
我建议使用笔记本电脑查看https://www.jacekjeznach.com。当您单击位于网站左侧的主导航栏中的任何选项时，您可以看到非常酷的加载动画 我知道如果不成为 Web 开发专家，我无法做出确切的效果。我什至查看了他投资组合的 GitHub 存储库，但那里没有 index.html。虽然有很多 .jsx 文件（ReactJS）。
我了解 HTML、CSS、JS 的基础知识，并且从未使用过任何框架（自从我开始学习 Web 开发以来不到 2 个月），但我需要这个项目的帮助，因为它是大学作业。 我选择制作一个电子学习网站，类似于这个人教的内容（使用 webflow 和少数后端工具，如 MemberStack、Airtable 和 Zapier）：https://www.youtube.com/watch?v=1-_rGcBQLzE&list=PL23ZvcdS3XPINPbP6y06tcLY_rZLi8euf
我可以使用任何框架，但我不能使用任何网站构建工具（如果我忽略说明并使用它，我无法解释复杂的 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 水平 flexbox 中所有元素的背景颜色更改为黑色，因为黑色是最好的背景，它允许我更改 .slide 类的宽度和高度属性以及从 97vw、97vh 的 translateX 和 translateY 函数到 100vw、100vh（就像在原始代码中一样）
顺便说一句，我在此处将 HTML 文件中的 CSS 和 JS 文件的代码合并在一起，以便能够在 *** 上共享此处的代码。 你可以访问https://github.com/shubham-garg1/web-project查看GitHub代码。我也已经在线发布了到目前为止所做的工作，所以你可以去http://www.elearningweb.tk查看源文件。
感谢您的帮助。
【问题讨论】：
除非你真的在加载一些东西，否则这是个坏主意。这是烦人的用户体验。您是否注意到您引用的该网站的加载动画持续时间与页面显示的内容或加载的数据无关？ 是的@Andy，我注意到该网站的加载动画持续时间与页面显示的内容或加载的数据无关，我想在这个网站上实现它，因为 1-2 秒的动画时间不会惹恼任何用户。当然，它也不是一个能够赚到任何真钱的官方网站...... 好吧，这让我很恼火。 【参考方案1】：如果您只想要一个微调器，它们实际上很容易做到，但是“加载”动画应该与“加载”过程相关联。在不做任何假设的情况下，让我们考虑一些原生 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($startDegreedeg)`;
requestAnimationFrame( () => this.animatedCardRotation(Element, startDegree, endDegree) );
在这里结合 requestAnimationFrame 确实为您的 CSS 动画增加了很多。您几乎可以在此处进行任何类型的 CSS 转换，如果您有块加载的内容，它可以帮助您构建一个非常准确的“加载栏”。
【讨论】：
感谢您的努力Any Day，但这与我想要的相差甚远。但是，我想我可能会放弃这个想法并遵循这个想法，但不使用那个 API。当用户单击选项时，只是具有过渡效果的 w3schools 事物。应该很好看 您可能会觉得难以置信，但稍加思考，这实际上就是您想要的。我只是用了一个不同的例子。我为您提供的animatedCardRotation 函数可用于任何类型的 css 变换，而不仅仅是旋转。该转换的速度由 css 转换值决定。 （比如一个 bar 被加载，一个 div 在动画之后被移除）
XMLHttpRequest 也可能对您有用。只需在根目录中的另一个页面上添加一些 HTML（没有开始的 html 或 body 标记），然后使用 XMLHttpRequest 向该本地页面发出请求，然后将内容放入您的卡片中。以上是关于如何制作点击按钮时显示的加载动画？它应该占据全屏并且应该从右到左并消失的主要内容，如果未能解决你的问题，请参考以下文章
如何在 tableview 中为图像设置动画以同时扩展和打开另一个视图控制器？