由JavaScript触发的CSS转换

Question

I want to have the following JavaScript function to transition function between from have none display to block when generate_loading_screen() is called to to when it finishes transition between display block to none. How do I do this?

 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> 

Just extra info: progress_percent is a variable that determines how much of the rest of the web-app has loaded. The grayscale filter does not affect the whole page, just the ID body_of

Thanks in advance

Answer 1

window.setInterval returns an intervalId which you need to cancel in order to stop the 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

Probably better to use a opacity transition by adding a class when your percent reaches 100.

Codepen for working example or see below.

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

Remove all the testing code to get this to work once, you might need to add additional code for your body div. Let me know if you need me to add more to this example!