JavaScript >> Javascript 文檔 >  >> JavaScript

加載中... Vanilla JavaScript 中的動畫

簡介

在開發網站和 Web 應用程序時,包括加載動畫可以通過傳達正在發生的事情來顯著改善用戶體驗。這可以吸引用戶並在加載內容時保持他們的注意力,並幫助用戶了解正在發生的事情,而不是讓他們猜測。

如何創建加載器

人們可能希望以多種方式顯示他們的加載器。出於本指南的目的,我們將構建一個加載器,它將覆蓋整個屏幕,然後在頁面加載完成後消失。首先,我們需要創建一個佔位符 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 創建完全相同的圖標。請記住,我們創建了一個額外的 div (spinner ) loader-container 內 div,這就是我們將用來表示圖標的:

.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-icon,我們現在可以像之前一樣使用 loader-container div 來居中並添加黑色背景:

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

注意: 您可以查看此現場 CodePen 演示,了解我們實際創建的加載程序。

如何使用 JavaScript 實現加載動畫

JavaScript 允許我們操縱我們的 HTML 結構並刪除或隱藏 loader-container 當前顯示在前面 網站的內容。有兩種主要方法可以實現這一點 - 只是隱藏 loader-container ,或完全刪除它。

無論您選擇哪種方法,第一步都是使用 querySelector()getElementById() 檢索 loader-container 這樣我們就可以操縱它:

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

其次,我們將使用 eventListener 監聽 load 事件,使其在load時調用回調函數 事件發生:

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

隱藏加載中...元素

最常見的方法是隱藏 loader-container 使用 display: none 以便在內容完全加載時消失。

HTML DOM 允許我們從 JavaScript 更改 HTML 元素的樣式,下面的代碼表明我們正在設置加載器的容器 display none 的屬性 這樣它就不會出現一次 load 成功:

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

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

或者,您可以創建一個單獨的類來保存 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 獲取內容是另一種可能需要包含加載器的情況。這種類型的內容可能需要一些時間來獲取和顯示,因此最好包含一個加載器。

在我們的例子中,讓我們嘗試從 quotes API 獲取報價 使用內置的 Fetch API。請注意,我們在本文開頭創建的 HTML 有一個 "Generate Quote" 按鈕。我們所要做的就是使用 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 動畫加載器。


Tutorial JavaScript 教程
  1. Javascript函數式編程基礎示例

  2. Markdown 編輯器 Reactjs

  3. 使用 Vanilla JS 構建報價切換器

  4. 4 個常見的角度錯誤

  5. 如何在 Nuxt.js 應用程序中設置和使用功能標誌

  6. 如何通過排序鍵順序獲取對像中的最後一項

  7. Node.js - REPL(讀取評估打印循環)

  1. Nuxt + VSCode 中的 ESLint &Prettier

  2. Node.js:fs.existsSync 在 Heroku 上不起作用

  3. SSR 應用程序 - 混淆您的代碼?

  4. Vue JS 中的 Ionic Modal,管理事件

  5. TOP Etch-a-sketch 網格調整大小

  6. 在帶有嵌套對象的 json 文件中查找值或對象,並將結果對像傳遞給 Javascript 中的子對象並做出反應

  7. 使用 SCSS 在 30 秒內完成移動響應式 React 頁面

  1. 使用 NestJS 為多個數據庫創建 GraphQL Api

  2. 使用 &&防止對象檢索類型錯誤

  3. 製作超文本標記庫

  4. 我學習編碼的原因是什麼