色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

加載Bootstrap 5.3微調器后，我如何淡入淡出？

CSS
黃文隆2年前8瀏覽0評論

我對Bootstrap中的spinners做了一些研究，發現了一些代碼。在這里。

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  rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link rel="stylesheet"  />
</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>

這里有一個簡單的CSS轉換的解決方案。我添加和刪除類& quot隱藏微調器& quot來展示和隱藏它。

以下是對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  rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link rel="stylesheet"  />
</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>