如何在不使用jQuery的情况下为javascript页面赋予淡出效果

Question

.. i tried using the code in which the loading will keep on increasing till 100 until a new page will open..

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

but its not working

Answer 1

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

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

Answer 2

You can append class to preload element

 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