[英]How to align CSS animation-delay in with NodeJS delay?
當我的 setTimeout 在 NodeJS 中時,如何添加預加載器,下面是調用 api 並將延遲設置為 10 秒的代碼:
function delay(s){
return new Promise(resolve => setTimeout(resolve,s));
}
async function getXml(){
let ans;
await delay(10000)
const {data} = await axios.get('https://gist.githubusercontent.com/SwayamShah97/a3619c5828ac8ed8085c4ae295a855d9/raw/e4e372552e042bd8bd9e8ab87da93eb030114f86/people.xml');
xml2js.parseString(data, (err, result) => {
if(err) {
throw err;
}
ans = result
});
我試圖像這樣使用前端 js 添加加載程序:
window.addEventListener("load", function () {
const loader = document.querySelector(".loader");
loader.className += " hidden"; // class "loader hidden"
});
HTML:
<div class="loader">
<img src="/public/images/coffee-loading.gif" alt="Loading..." />
</div>
CSS:
.loader.hidden {
animation: fadeOut 10s;
animation-fill-mode: forwards;
}
@keyframes fadeOut {
100% {
opacity: 0;
visibility: hidden;
}
}
它的工作原理是,由於 setTimeout,它應該等待 10 秒,然后再顯示預加載器 10 秒,而不是與延遲對齊。
我怎樣才能實現這個功能?
animation-delay: 10s;
我應該指出,這在用戶體驗方面非常糟糕,除非您計划減少這些計時器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.