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

Question

当我的 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 秒，而不是与延迟对齐。

我怎样才能实现这个功能？

Answer 1

animation-delay: 10s;

我应该指出，这在用户体验方面非常糟糕，除非您计划减少这些计时器。