如何在Bootstrap 5.3 Spinner加载后淡入淡出？

x8diyxa7 于 2023-06-04 发布在 Bootstrap

关注(0)|答案(1)|浏览(177)

我对Bootstrap中的微调器做了一些研究，找到了一些代码。在这里。

function getData() {
         var spinner = document.getElementById("spinner");
         spinner.style.display = "block";
         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.style.display = "none";
            });
         }, 5000);
      }
      getData();

<!-- begin snippet: js hide: false console: true babel: false -->

#spinner {
  position: absolute;
  top: 49%;
  left: 47%;
  width: 3.5rem;
  height: 3.5rem;
  /* transform: translate(-50%, -50%); */
  display: none;
}

<!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" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</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>

为了美观，我要让它平滑地淡入淡出。我在StackOverflow上看了一些其他的问题here，但它没有多大帮助。让我知道我能做什么。

twitter-bootstrap

来源：https://stackoverflow.com/questions/76392753/how-would-i-fade-in-and-out-bootstrap-5-3-spinner-after-it-loads

1条答案

按热度按时间

nzk0hqpo1#

这里有一个简单的CSS过渡的解决方案。我添加和删除类“hidespinner”来显示和隐藏它。
下面是对css动画小技巧的解释：https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/

function getData() {
         var spinner = document.getElementById("spinner");
         spinner.classList.remove('hidespinner'); // <- new
         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.add('hidespinner'); // <- new
            });
         }, 5000);
      }
      getData();

<!-- begin snippet: js hide: false console: true babel: false -->

#spinner {
  position: absolute;
  top: 49%;
  left: 47%;
  width: 3.5rem;
  height: 3.5rem;
  /* transform: translate(-50%, -50%); */
  /* new code */
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

#spinner.hidespinner {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}

<!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" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>

<body>
  <div class="spinner-border m-5 hidespinner" role="status" id="spinner"><!-- added class "hidespinner" here to initial hide the element -->
    <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>

赞(0）回复(0）举报 2023-06-04

我来回答

如何在Bootstrap 5.3 Spinner加载后淡入淡出？

1条答案

相关问题

热门标签

最新问答