Переход CSS сгенерирован JavaScript

Question

Я хочу иметь следующую функцию JavaScript для перехода между функциями между ними, поскольку ни один из них не блокируется при вызове функции generate_loading_screen(), когда он заканчивает переход между блоком отображения в 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 это переменная, которая определяет, сколько из остальной части веб-приложение загрузится. Оттенки серого фильтра не влияет на всю страницу, а только идентификатор body_of

Заранее спасибо

Answer 1

Вероятно, лучше используйте переход непрозрачности путем добавления класса, когда ваш процент достигает 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(); 
}); 

Удалить весь код тестирования, чтобы получить эту работу один раз, вам может понадобиться добавить дополнительный код для вашего тела 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); 
};