正在加载...Vanilla JavaScript中的动画

方石剑
361 阅读6分钟

简介

在开发网站和网络应用时，包括一个加载动画可以通过传达正在发生的事情来显著改善用户体验。这可以吸引用户并在加载内容时保持他们的注意力，而且可以帮助用户理解正在发生的事情，而不是让他们猜测。

在本指南中，我们将看看如何使用香草的JavaScript来创建一个加载动画。我们将使用GIF动画和CSS创建的加载器，看看如何在两种情况下使用它们：在应用/网站启动时加载内容或从外部API请求内容。

css and gif loading spinner animation in vanilla javascript

如何创建一个加载器

人们可能想以各种方式来显示他们的加载器。在本指南中，我们将建立一个加载器，它将覆盖整个屏幕，然后在页面加载完毕后消失。首先，我们需要创建一个占位的HTML页面。

<div class="loader-container">
    <div class="spinner"></div>
</div>

<div class="main-content">
    <h1>Hello World!</h1>
    <p>
        This is a demo Project to show how to add animated loading with Vanilla
        JavaScript.
    </p>
    <div class="buttons">
        <button class="btn"><a href="#">Read Article</a></button>
        <button class="btn get-quote">Generate Quote</button>
        </div>
        <div class="quote-section">
        <blockquote class="quote">
            If you do not express your own original ideas, if you do not listen to
            your own being, you will have betrayed yourself.
        </blockquote>
        <span class="author">- Rollo May</span>
        </div>
</div>

为了简单起见，我们只有两个<div> 块--一个用于加载器，一个用于网站的内容。

如前所述，加载图标可以是一个GIF，一个用CSS创建的动画图标，或其他东西。要记住的是，同样的方法适用于我们使用的任何类型的加载图标。

使用GIF创建加载器

GIF是一个可以无限期播放的动画图标。一旦我们创建了我们的GIF，我们将对容纳它的loader-container div进行设计。有许多方法来设计它!你可以在这里发挥真正的创造力。我们将简单地在页面顶部的图标旁边添加一个黑色背景层，以 "屏蔽 "加载内容。

.loader-container {
    width: 100%;
    height: 100vh;
    position: fixed;
    background: #000
        url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center
        no-repeat;
    z-index: 1;
}

当我们现在加载我们的网页时，我们将看到一个黑色的背景，屏幕中间有一个GIF正在加载，类似于这样。

在这一点上，我们已经准备好使用JavaScript来实现加载。但我们也来看看如何使用CSS创建的动画来代替GIF，这不需要额外的文件来导入。

使用CSS创建加载器

我们将用CSS创建完全相同的图标。记住，我们在loader-container div里面创建了一个额外的div (spinner)，这就是我们要用来表示图标的东西。

.spinner {
    width: 64px;
    height: 64px;
    border: 8px solid;
    border-color: #3d5af1 transparent #3d5af1 transparent;
    border-radius: 50%;
    animation: spin-anim 1.2s linear infinite;
}

@keyframes spin-anim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

上面的代码将帮助我们创建一个CSS加载器图标，现在我们可以使用加载器容器（loader-container）div来居中，并像之前那样添加黑色背景。

.loader-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    background: #000;
    z-index: 1;
}

现在我们已经看到了两种可用的动画加载器，让我们用JavaScript来控制这个加载动画出现和消失的时间。

**注意：**你可以查看这个CodePen的实时演示，看看我们创建的加载器的运行情况。

如何用JavaScript实现一个加载动画

JavaScript允许我们操作我们的HTML结构，删除或隐藏当前显示在网站内容前面的loader-container 。有两种主要的方法来实现这一点--只是隐藏loader-container ，或者完全删除它。

无论你选择哪种方法，第一步都是使用querySelector() 或getElementById() 来检索loader-container ，这样我们就可以对它进行操作。

const loaderContainer = document.querySelector('.loader-container');

其次，我们将使用eventListener 来监听load 事件，这样，当load 事件发生时，它就会调用回调函数。

window.addEventListener('load', () => {
    // ...
});

隐藏加载...元素

最常见的方法是用display: none 来隐藏loader-container ，这样当内容完全加载时，它就消失了。

HTML DOM允许我们从JavaScript中改变HTML元素的样式，下面的代码表明，我们将加载器的容器display 属性设置为none ，这样，一旦load 成功，它就不会出现。

window.addEventListener('load', () => {
    loaderContainer.style.display = 'none';
});

或者，你可以创建一个单独的类，它持有display: none 属性。

.loader-container-hidden {
    display: none;
}

然后使用classList.add() ，将该类添加到loader-container 元素中。

window.addEventListener('load', () => {
    loaderContainer.classList.add('loader-container-hidden');
});

删除加载中的...元素

到目前为止，我们已经看到了一个主要的方法，它允许我们隐藏我们的loader-container ，这意味着该元素仍然存在，但被隐藏了。另一个选择是完全删除该元素。

window.addEventListener('load', () => {
    loaderContainer.parentElement.removeChild(loaderContainer);
});

这时，当我们加载我们的页面时，加载动画将被显示出来，直到页面的内容完全加载完毕。

从API请求外部内容时实现加载动画

从外部API获取内容是另一种可能需要加入加载器的情况。这种类型的内容可能需要一些时间来获取和显示，所以最好是包含一个加载器。

在我们的案例中，让我们尝试使用内置的Fetch API从一个报价API中获取一个报价。请注意，我们在本文开始时创建的HTML有一个*"生成报价 "*按钮。我们要做的就是使用document.querxySelector() 方法来获取该元素，并创建一个回调函数来处理用户点击按钮时触发的click 事件。

const getQuoteBtn = document.querySelector('.get-quote');

getQuoteBtn.addEventListener('click', () => {
    fetch('https://api.quotable.io/random')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            const quote = document.querySelector('.quote');
            const author = document.querySelector('.author');
            quote.innerHTML = data.content;
            author.innerHTML = data.author;
        });
});

这将成功地帮助我们将随机的引言放入我们的应用程序中，但我们希望有一个加载动画，以便用户知道我们正在期待内容。为了达到这个目的，我们将创建两个方法，一个用来显示loader-container ，另一个用来隐藏它。

const displayLoading = () => {
    loaderContainer.style.display = 'block';
};

const hideLoading = () => {
    loaderContainer.style.display = 'none';
};

**注意：**我们使用的是display: none ，但我们可以使用我们前面列出的其他方法中的任何一种。

在这一点上，我们终于可以将加载动画纳入回调函数。当获取开始时，回调函数将显示加载动画，并在收到数据后隐藏它。

getQuoteBtn.addEventListener('click', () => {
    displayLoading();
    fetch('https://api.quotable.io/random')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            hideLoading();
            const quote = document.querySelector('.quote');
            const author = document.querySelector('.author');
            quote.innerHTML = data.content;
            author.innerHTML = data.author;
        });
});

结论

在这篇文章中，我们已经学会了如何使用vanilla JavaScript来创建一个加载动画并适当地显示它。我们考虑了各种方法来完成这个任务，并看了几个不同的加载动画的使用情况。我们选择了使用旋转的圆圈作为加载器，但是你可以用任何你喜欢的方式来改变它--请随意创建你自己的GIF或CSS动画加载器。

avatar
文章
阅读
粉丝