如何在不使用jQuery的情況下為javascript頁面賦予淡出效果

Question

..我嘗試使用其中加載將一直增加到100直到新頁面打開的代碼。

if(loading==90){
  preload.style.animation = "fadeOut 2s ease";
} 

但它不起作用

Answer 1

使用css不透明度，1完全可見，0隱藏，0.5一半可見。

document.getElementById("yourId").style.opacity = "0.5";

Answer 2

您可以將類追加到preload元素

 if (window.addEventListener) { window.addEventListener('load', cool, false); } function cool() { var preload = document.getElementById("preload"); var loading = 0; var id = setInterval(frame,64); function frame() { if(loading == 100) { clearInterval(id); // window.open("test1.html","_self"); } if(++loading == 90){ preload.className = "ld"; } } }; 

 #preload { position: absolute; display: block; left: 0; top: 0; background: tomato; width: 100%; height: 200px; transition: all 2s ease; } .ld { opacity: 0; } 

 <div id="preload"></div> test string