如何在 3 秒后停止加载程序的动画

Question

我的网络项目有一个加载器。我可以在网站打开时让这个加载器可见，但我希望它在 3 秒后关闭，但我找不到如何做到这一点。请帮我 ：） 我正在使用 tailwindcss 作为 CSS 框架。 我正在使用 Jquery 作为 Js 框架。 HTML：

<div id="loader" class="w-full h-screen absolute z-50 flex justify-center items-center bg-black hidden">
    <div id="loading" class="w-32 h-32" style="background: url(/images/loader.jpg)no-repeat center center;background-size:cover;"></div>
</div>
<div class="w-full h-screen flex flex-col md:flex-row">
    <div class="w-full md:w-1/2 h-full flex flex-col text-center justify-center gap-4 items-center bg-green-450">
        <p class="text-7xl font-bold" style="font-family: 'Rubik', sans-serif;">KATILIMCIYIM</p>
        <p class="text-5xl w-1/2 ">Geçici Personel Arıyorum</p>
        <button class="rounded-full shadow-2xl text-4xl px-6 py-2 focus:outline-none bg-yellow-450 hover:bg-yellow-500 mt-16" style="color:#1AA057;">BAŞVUR</button>
    </div>
    <div class="w-full md:w-1/2 h-full flex flex-col text-center justify-center gap-4 items-center bg-yellow-450">
        <p class="text-7xl font-bold" style="font-family: 'Rubik', sans-serif;">PERSONELİM</p>
        <p class="text-5xl w-1/2 ">Fuarda Çalışmak İstiyorum</p>
        <button class="rounded-full shadow-2xl text-4xl px-6 py-2 focus:outline-none bg-green-450 hover:bg-green-500 mt-16" style="color:#FBB13E;">BAŞVUR</button>
    </div>
</div>

CSS

    .bg-yellow-450 {
        --tw-bg-opacity: 1;
        background-color: rgba(251, 177, 62, var(--tw-bg-opacity));
    }

    .bg-green-450 {
        --tw-bg-opacity: 1;
        background-color: rgba(26, 160, 87, var(--tw-bg-opacity));
    }

    #loading {
        animation: load 1s infinite;
    }

    @keyframes load {
        0% {
            width: 8rem;
            height: 8rem;
        }

        50% {
            width: 9rem;
            height: 9rem;
        }

        100% {
            width: 8rem;
            height: 8rem;
        }
    }

JS

   $(document).ready(function() {
        document.getElementById('loader').style.display = "flex";
    });

Answer 1

在 JQuery 中，您可以通过调用 delay() 来延迟对函数的调用，并以毫秒为单位传递。然后隐藏项目使用fadeOut()，再次以毫秒为单位传递动画长度。

例如：

 $(document).ready(function() {
        document.getElementById('loader').style.display = "flex";
        $("#loader").delay(3000).fadeOut(1000)
 });

注意：document.getElementById('loader').style.display = "flex"; 的 JQuery 等效项是：$("#loader").css('display', 'flex')

Answer 2

在您的 JavaScript 中执行此操作：

$(document).ready(function() {
    document.getElementById('loader').style.display = "flex";
    setTimeout(function(){
        document.getElementById('loader').style.display = "none";
     },3000); // 3000ms = 3 seconds
 });