如何使CSS代码运行一定的时间？
[英]How do I make css code run for a certain amount of time?
问题描述
I am trying to fix a double submit form problem. 
我正在尝试解决双重提交表单问题。 My solution was to load css code onClick to add a grey overlay and an animated loading icon in the center of the screen. 我的解决方案是加载CSS代码onClick，以在屏幕中央添加灰色叠加层和动画加载图标。
My question is, how would I add a setTimeout for the overlay and the icon? 我的问题是，如何为叠加层和图标添加setTimeout？ I only want the css code to run for approximately 6 seconds then for the users to regain access to the form. 我只希望CSS代码运行大约6秒钟，然后用户才能重新获得对表单的访问权限。
#cover-spin { position: fixed; width: 100%; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.7); z-index: 9999; display: none; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #cover-spin::after { content: ''; display: block; position: absolute; left: 48%; top: 40%; width: 40px; height: 40px; border-style: solid; border-color: black; border-top-color: transparent; border-width: 4px; border-radius: 50%; -webkit-animation: spin .8s linear infinite; animation: spin .8s linear infinite; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id="cover-spin"></div> <button onclick="$('#cover-spin').show(0)">Submit</button> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2019-04-03 09:15:23
To answer the explicit question 回答明确的问题
how would I add a setTimeout for the overlay and the icon
use setTimeout to run the opposite of what you do to show the overlay after a specific interval (in milliseconds): 使用setTimeout可以执行与在特定时间间隔（以毫秒为单位）之后显示覆盖图相反的操作：
$('#cover-spin').show();
setTimeout(function() { $('#cover-spin').hide(); }, 6000);
Updating your existing button onclick to: 将现有按钮onclick更新为：
<button onclick="$('#cover-spin').show();setTimeout(function() { $('#cover-spin').hide(); }, 6000);">Submit</button>
To answer the implied question: 要回答隐含的问题：
how do I hide a progress overlay when the submit has completed
$.post provides a callback function, but also returns a promise. $.post提供了一个回调函数，但也返回了一个Promise。 No need to worry about promises too much, just that it has a .done method which you can utilise: 不必担心promise，只需要使用.done方法即可：
$.post(url, data)
.done(function(result) {
$("#cover-spin").hide();
});
解决方案2
2 2019-04-03 09:19:48
So, There is something called animation-duration 所以，有一种叫做animation-duration东西
So simply type this inside your CSS where you are calling the animation: 因此，只需在要调用动画的CSS内键入以下内容：
animation-duration: 6s;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.