实现Bootstrap Spinner平滑渐显渐隐效果的教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

实现Bootstrap Spinner平滑渐显渐隐效果的教程

2025-10-16

浏览次数：次

返回列表

实现Bootstrap Spinner平滑渐显渐隐效果的教程

本教程详细介绍了如何利用css的`opacity`和`visibility`属性结合j*ascript，为bootstrap 5.3加载指示器（spinner）创建平滑的渐显和渐隐动画效果。通过管理css类，我们能够实现比简单切换`display`属性更优雅的用户体验，确保加载过程的视觉流畅性。

在现代Web应用中，为用户提供即时反馈是提升用户体验的关键。当数据加载或处理耗时操作时，一个视觉友好的加载指示器（如Bootstrap Spinner）能够有效告知用户系统正在工作。然而，仅仅通过切换display属性来显示或隐藏Spinner，会导致其突兀地出现和消失，缺乏美感。本文将深入探讨如何利用CSS的opacity和visibility属性，结合J*aScript，为Bootstrap 5.3 Spinner实现平滑的渐显和渐隐动画效果。

核心原理：CSS过渡动画

实现平滑渐显渐隐的关键在于CSS的transition属性，它允许元素在不同状态之间平滑过渡。对于加载指示器，我们需要控制其透明度（opacity）和可见性（visibility）。

opacity: 控制元素的透明度，从0（完全透明）到1（完全不透明）。通过过渡opacity可以实现渐显渐隐效果。
visibility: 控制元素的可见性。与display: none不同，visibility: hidden使元素不可见但仍占据其布局空间，并且可以进行过渡。更重要的是，visibility属性在过渡时可以设置延迟，这对于渐隐效果至关重要：我们希望元素在完全透明后才真正从视觉上“消失”，避免在透明度渐变过程中出现交互问题。

通过组合opacity和visibility的过渡，我们可以实现以下效果：

渐显: opacity从0过渡到1，同时visibility立即变为visible（或保持visible）。
渐隐: opacity从1过渡到0，并在opacity过渡完成后，visibility才变为hidden。

实现步骤

我们将通过一个模拟数据加载的示例来演示这一过程。

1. HTML 结构

首先，确保你的页面引入了Bootstrap 5.3的CSS和JS文件。Spinner的HTML结构是一个带有特定ID的div元素，并包含spinner-border等Bootstrap类。为了实现初始隐藏，我们会在其上添加一个自定义的hidespinner类。

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Spinner 渐显渐隐</title>
  <!-- 引入 Bootstrap 5.3 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <style>
    /* 这里将放置自定义CSS */
  </style>
</head>
<body>
  <div class="spinner-border m-5 hidespinner" role="status" id="spinner">
    <span class="visually-hidden">Loading...</span>
  </div>
  <div id="dataContainer" class="container mt-4"></div>

  <!-- 引入 Bootstrap 5.3 JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script>
    // 这里将放置 J*aScript 代码
  </script>
</body>
</html>

注意：

中添加了 hidespinner 类，确保页面加载时Spinner是隐藏的。

2. CSS 样式

接下来，定义Spinner的默认样式以及hidespinner类的样式。关键在于transition属性的设置。

#spinner {
  position: fixed; /* 使用 fixed 以确保在滚动时也居中 */
  top: 50%;
  left: 50%;
  width: 3.5rem;
  height: 3.5rem;
  transform: translate(-50%, -50%); /* 居中显示 */
  /* 初始状态：可见，不透明 */
  visibility: visible;
  opacity: 1;
  /* 渐显过渡：opacity 300ms，visibility 立即生效 */
  transition: visibility 0s linear 0s, opacity 300ms ease-in-out;
  z-index: 1050; /* 确保在其他内容之上 */
}

#spinner.hidespinner {
  /* 隐藏状态：不可见，透明 */
  visibility: hidden;
  opacity: 0;
  /* 渐隐过渡：opacity 300ms，visibility 在 opacity 结束后才生效 */
  transition: visibility 0s linear 300ms, opacity 300ms ease-in-out;
}

CSS 注意事项解释：

#spinner 默认状态：visibility: visible; opacity: 1;，并设置了渐显的过渡规则。visibility 0s linear 0s 意味着visibility在过渡开始时立即变为visible，没有延迟。
#spinner.hidespinner 隐藏状态：visibility: hidden; opacity: 0;。
渐隐时的transition: visibility 0s linear 300ms, opacity 300ms ease-in-out; 是关键。它表示opacity将在300毫秒内完成过渡，而visibility将在300毫秒的延迟后立即变为hidden。这样确保了在opacity完全变为0之后，元素才真正从视觉上消失，避免了在半透明状态下元素可能被点击或占据空间的问题。

3. J*aScript 逻辑

最后，通过J*aScript在数据加载前后添加或移除hidespinner类，来触发CSS过渡。

function getData() {
  var spinner = document.getElementById("spinner");

  // 移除 hidespinner 类，使 Spinner 渐显
  spinner.classList.remove('hidespinner'); 

  // 模拟数据加载过程，例如通过 setTimeout 或实际的 fetch 请求
  setTimeout(function () {

以上就是实现Bootstrap Spinner平滑渐显渐隐效果的教程的详细内容，更多请关注其它相关文章！

# 将在 # 方便智能营销推广方案 # 鱼台市场营销推广招聘 # 昆山抖音seo教程 # 天河全网营销推广服务 # 明光网络推广问答营销 # 解析淘宝seo # 西城定制网站建设 # 反推收录SEO # 枣庄网站建设找哪家 # 成都婚纱摄影网站推广 # 的是 # 移除 # 关键在于 # 后才 # 可以实现 # css # 复选框 # 自定义 # 加载 # 渐隐 # .net # cdn # ai # ssl # npm # bootstrap # js # html # java # javascript