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是一个变量，用于确定已加载的其他网络应用程序的数量。灰度滤镜不会影响整个页面，只会影响ID body_of

提前致谢

Answer 1

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);
};

Answer 2

当你的百分比达到100时，通过添加一个类来使用不透明度转换可能会更好。

Codepen for working example或见下文。

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();
});

删除所有测试代码以使其工作一次，您可能需要为您的body div添加其他代码。如果您需要我为此示例添加更多内容，请与我们联系！

由JavaScript触发的CSS转换

2 个答案: