如何实现Bootstrap 5.3 Spinner加载完成后的平滑淡入淡出效果？

要实现平滑的淡入淡出，核心是避免使用display: none/block（该属性无法触发CSS过渡动画），改用opacity和visibility结合CSS过渡来实现。以下是修改后的完整代码：

修改后的CSS #

#spinner {
  position: absolute;
  top: 49%;
  left: 47%;
  width: 3.5rem;
  height: 3.5rem;
  /* 初始状态：透明且不可交互 */
  opacity: 0;
  visibility: hidden;
  /* 定义过渡动画：透明度+可见性变化，时长0.3秒 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 控制Spinner显示的类 */
#spinner.show {
  opacity: 1;
  visibility: visible;
}

修改后的JavaScript #

function getData() {
  var spinner = document.getElementById("spinner");
  // 添加类触发淡入动画
  spinner.classList.add('show');
  setTimeout(function () {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => {
        data.forEach((item) => {
          var div = document.createElement("div");
          var p = document.createElement("p");
          p.innerText = item.title;
          div.appendChild(p);
          document.getElementById("dataContainer").appendChild(div);
        });
        // 移除类触发淡出动画
        spinner.classList.remove('show');
      });
  }, 5000);
}
getData();

修改后的HTML（移除冲突的Bootstrap3引用） #

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Spinner Tutorial</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>
<body>
  <div class="spinner-border m-5" role="status" id="spinner">
    <span class="visually-hidden">Loading...</span>
  </div>
  <div id="dataContainer"></div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

关键说明： #

• opacity控制元素透明度，从0到1实现淡入，1到0实现淡出
• visibility避免元素透明后仍占据交互空间，保证体验流畅
• transition属性可自定义过渡时长（比如改成0.5s）和缓动效果，适配不同设计需求
• 用类控制状态比直接操作style更符合CSS模块化思路，便于后续维护

内容的提问来源于stack exchange，提问作者1ens