如何将中的CSS动画延迟与NodeJS延迟对齐



当我的setTimeout在NodeJS中时,我如何添加预加载程序,下面是调用api并设置10s延迟的代码:

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;
}
} 

它的工作原理是,由于设置超时,它应该等待10秒,然后显示额外的10秒预加载程序,而不是与延迟对齐。

如何实现此功能?

animation-delay: 10s;

我应该注意的是,除非你计划减少这些计时器,否则这在用户体验方面相当糟糕。

最新更新