CSS 转换由 JavaScript 触发

Question

我想要以下 JavaScript 函数来转换函数，从调用 generate_loading_screen() 时的 none 显示到块到完成显示块之间的转换至 none。我该怎么做？

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 returns 一个 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 时，通过添加 class 使用不透明度过渡效果可能更好。

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 添加额外的代码。如果您需要我在此示例中添加更多内容，请告诉我！

CSS 转换由 JavaScript 触发

CSS Transition Triggered by JavaScript

html

javascript

css

styles

transition