js 列表加载动画

在JavaScript中实现列表加载动画，通常涉及以下几个基础概念：

基础概念

DOM操作：通过JavaScript操作HTML文档对象模型（DOM），动态地添加、删除或修改元素。
CSS动画：使用CSS来创建动画效果，可以通过添加或移除CSS类来触发动画。
异步编程：使用JavaScript的异步特性（如Promise、async/await）来处理数据加载，确保动画在数据加载期间显示。

优势

用户体验：加载动画可以提升用户体验，让用户知道数据正在加载，而不是页面卡住。
界面美观：动画效果可以使界面更加生动和专业。

类型

骨架屏：在数据加载前显示一个内容占位符，通常是灰色的矩形块，模拟最终内容的布局。
旋转加载器：常见的旋转图标，表示正在加载。
进度条：显示加载进度，适用于可以预估加载时间的场景。

应用场景

分页加载：当用户滚动到页面底部时，加载更多数据。
初始加载：页面首次加载时显示加载动画。
数据请求：在进行API请求时显示加载动画。

实现示例

以下是一个简单的示例，展示如何在JavaScript中实现列表加载动画：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List Loading Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="list-container">
        <div id="loading" class="loading">Loading...</div>
    </div>
    <button id="load-more">Load More</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.loading {
    text-align: center;
    font-size: 20px;
    color: #888;
}

.list-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

JavaScript (script.js)

document.getElementById('load-more').addEventListener('click', async () => {
    const loading = document.getElementById('loading');
    loading.style.display = 'block'; // Show loading animation

    // Simulate an API call with setTimeout
    await new Promise(resolve => setTimeout(resolve, 2000));

    // Clear loading animation
    loading.style.display = 'none';

    // Add new items to the list
    const listContainer = document.getElementById('list-container');
    for (let i = 0; i < 5; i++) {
        const item = document.createElement('div');
        item.className = 'list-item';
        item.textContent = `Item ${listContainer.children.length + 1}`;
        listContainer.appendChild(item);
    }
});

解释

HTML：包含一个用于显示加载动画的div和一个按钮来触发加载更多数据。
CSS：定义了加载动画的样式和列表项的样式。
JavaScript：当用户点击“Load More”按钮时，显示加载动画，模拟API调用（使用setTimeout），然后隐藏加载动画并添加新的列表项。

通过这种方式，可以在数据加载期间显示一个简单的加载动画，提升用户体验。