加载具有淡出效果的页面

时间:2018-03-29 14:07:31

标签: javascript fadeout

我想在超时后插入淡出效果 我读了如何插入淡出但我无法将其插入到我的代码中。

(function() {
  if (window.addEventListener) {
    window.addEventListener("load", nascondi_loading_screen, false);
  } else {
    window.attachEvent("onload", nascondi_loading_screen);
  }
})();

function mostra_loading_screen() {
  document.getElementById("loading_screen").style.display = 'block';
}

function nascondi_loading_screen() {
  setTimeout(function() {
    document.getElementById("loading_screen").style.display = 'none';
  }, 3000);
}

mostra_loading_screen();
#loading_screen {
  z-index: 1000;
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: white;
  color: white;
  text-align: center;
  padding-top: 100px;
  opacity: 0.5;
  opacity: 1;
  filter: alpha(opacity=50);
}
<div id="loading_screen">
  <img class="uk-position-center" src="images/loader.gif">
</div>

2 个答案:

答案 0 :(得分:1)

是否显示元素。你不能有过渡。但是,您可以通过设置不透明度的动画来淡出。为此设置js中的不透明度:

 document.getElementById("loading_screen").style.opacity = 0 /* or 1 to fade in */;

然后在该属性的css中设置转换:

 #loading_screen {
   transition: opacity ease 2s;
 }

答案 1 :(得分:0)

JonasW。 最后我用这种方式解决了,所以在3秒后我改变了不透明度,然后又增加了2个(总共5个)让我显示无。

                   function nascondi_loading_screen()   {
       setTimeout(function() { 
           document.getElementById("loading_screen").style.opacity = 0;
                             }, 3000);

                setTimeout(function(){ 
                    document.getElementById("loading_screen").style.display = 'none'; }, 5000);

}