由 JavaScript 触发的 CSS 过渡

Question

我想让以下 JavaScript 函数在调用 generate_loading_screen(( 时从无显示到块之间转换函数，当它完成从显示块到无的转换时。我该怎么做？

function generate_loading_screen() {
  window.setInterval(function(){
    if (progress_percent < 75) {
      document.getElementById("loading_screen").style.display = "block";
      document.getElementById("body_of").style.filter = "grayscale(1)";
    }
    else {
      document.getElementById("loading_screen").style.display = "none";
      document.getElementById("body_of").style.filter = "none";
      stop_generating_loading();
    }
  }, 50);
};
function stop_generating_loading() {
  clearInterval(generate_loading_screen);
};

.loading {
  position: fixed;
  border: 16px solid #dbdbdb;
  border-radius: 50%;
  border-top: 16px solid #53f442;
  margin-left: 44%;
  margin-top: 10%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div class="loading" id="loading_screen" style="display: none;"></div>

只是额外的信息：progress_percent是一个变量，用于确定 Web 应用程序的其余部分已加载多少。灰度滤镜不会影响整个页面，只影响 ID body_of

提前致谢

Answer 1

最好

使用不透明度过渡，在百分比达到 100 时添加一个类。

用于工作示例的代码笔或见下文。

.HTML：

<div class="loading" id="loading_screen"></div>

.CSS：

.loading {
  position: fixed;
  border: 16px solid #dbdbdb;
  border-radius: 50%;
  border-top: 16px solid #53f442;
  margin-left: 44%;
  margin-top: 10%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  opacity: 100%;
  transition: opacity 1s ease-in-out;
}
.done_loading {
  opacity: 0;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Javascript：

var progress_percent = 25;
var interval;
function generate_loading_screen() {
  interval = window.setInterval(function(){
    progress_percent += 1; //totest
    if (progress_percent > 75) {
      document.getElementById("loading_screen").className = "loading done_loading";
      //stop_generating_loading();
    }
    //TESTING
    if(progress_percent > 100){
      console.log("Reached 100%");
      document.getElementById("loading_screen").className = 'loading';
      progress_percent = 0;
    }
    //
  }, 50);
};
function stop_generating_loading() {
  clearInterval(interval);
};
document.addEventListener('DOMContentLoaded', function(){
  generate_loading_screen();
});

删除所有测试代码以使其工作一次，您可能需要为您的身体div 添加其他代码。如果您需要我在此示例中添加更多内容，请告诉我！

Answer 2

window.setInterval返回一个intervalId，您需要取消该才能停止interval

let timer;
function generate_loading_screen() {
  timer = window.setInterval(function(){
    if (progress_percent < 75) {
      document.getElementById("loading_screen").style.display = "block";
      document.getElementById("body_of").style.filter = "grayscale(1)";
    }
    else {
      document.getElementById("loading_screen").style.display = "none";
      document.getElementById("body_of").style.filter = "none";
      stop_generating_loading();
    }
  }, 50);
};
function stop_generating_loading() {
  clearInterval(timer);
};