JavaScriptでトリガされたCSSの遷移

Question

generate_loading_screen（）が呼び出されたときに、表示ブロックとなしの間でトランジションが完了すると、トランジション機能が表示からブロックに切り替わるように、次のJavaScript機能を使用します。これはどうすればいいですか？

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がロードされているどのようにウェブアプリの残りの多くを決定する変数です。グレースケールフィルタは、単に事前に

おかげ

Answer 1

を停止するためにキャンセルする必要があるintervalIdを返し、ページ全体に影響を与えません。パーセントが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 body_of IDはあなたがおそらくより良い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); 
};