javascript - 2秒后如何停止加载动画？

我想制作一个加载屏幕和一个淡入淡出的页面，如下所示:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5 .问题是我不知道如何结束加载循环并使它消失。

代码

        <body>
            <div class="sk-chase">
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
            </div>
         </body>
body {
        background-color: #636e72;
    }sk-chase {
      width: 40px;
      height: 40px;
      animation: sk-chase 2.5s infinite linear both;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      top: 50%;
      left: 50%;
      position: absolute;
    }
    .sk-chase-dot {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0; 
      animation: sk-chase-dot 2.0s infinite ease-in-out both; 
    }.sk-chase-dot:before {
      content: '';
      display: block;
      width: 25%;
      height: 25%;
      background-color: #fff;
      border-radius: 100%;
      animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
    }
    .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
    .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
    .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
    .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
    .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
    .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
    .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
    .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
    .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
    .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
    .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
    .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
    @keyframes sk-chase {
      100% { transform: rotate(360deg); } 
    }
    @keyframes sk-chase-dot {
      80%, 100% { transform: rotate(360deg); } 
    }
    @keyframes sk-chase-dot-before {
      50% {
        transform: scale(0.4); 
      } 100%, 0% {
        transform: scale(1.0); 
      } 
    }

最佳答案

您需要 JavaScript 告诉浏览器何时隐藏加载器和显示内容。请参阅下面的代码段

var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.querySelector("#loader").style.display = "none";
  document.querySelector("#myDiv").style.display = "block";
  document.querySelector("body").style.backgroundColor = "white";
}

body {
  background-color: #636e72;
}

.sk-chase {
  width: 40px;
  height: 40px;
  animation: sk-chase 2.5s infinite linear both;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  position: absolute;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}

.sk-chase-dot:nth-child(1) {
  animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2) {
  animation-delay: -1.0s;
}

.sk-chase-dot:nth-child(3) {
  animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4) {
  animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5) {
  animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6) {
  animation-delay: -0.6s;
}

.sk-chase-dot:nth-child(1):before {
  animation-delay: -1.1s;
}

.sk-chase-dot:nth-child(2):before {
  animation-delay: -1.0s;
}

.sk-chase-dot:nth-child(3):before {
  animation-delay: -0.9s;
}

.sk-chase-dot:nth-child(4):before {
  animation-delay: -0.8s;
}

.sk-chase-dot:nth-child(5):before {
  animation-delay: -0.7s;
}

.sk-chase-dot:nth-child(6):before {
  animation-delay: -0.6s;
}

@keyframes sk-chase {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sk-chase-dot {
  80%,
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4);
  }
  100%,
  0% {
    transform: scale(1.0);
  }
}

<body onload="myFunction()">
  <div id="loader" class="sk-chase">
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
    <div class="sk-chase-dot"></div>
  </div>
  <div style="display:none;" id="myDiv" class="animate-bottom">
    <h2>Tada!</h2>
    <p>Some text in my newly loaded page..</p>
  </div>
</body>

关于javascript - 2秒后如何停止加载动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58806455/

javascript - 2秒后如何停止加载动画？

上一篇：css - 旧式数字 ("onum") 在 Chrome 中不起作用

下一篇：html - 如何将下拉菜单添加到标题导航栏？