我怎样才能使我的弹出窗口在5秒后顺利出现?

The popup shall appear and cover the full screen after 5 seconds smoothly using the CSS3 transition property and opacity, however it appears all at once.

当使用CSS3过渡属性和不透明度时，弹出窗口将在5秒后出现并覆盖全屏，但它同时出现。

JSFiddle: https://jsfiddle.net/dnvk87xL/

JSFiddle:https://jsfiddle.net/dnvk87xL/

var element = document.getElementById("popup");

var t=setTimeout(openPopUp,5000);
function openPopUp() {
  element = document.getElementById("popup");
  element.style.display = "block";
  element.style.opacity = "1";
}

#popup{
  position: fixed;
  height:100%;
  background-color: green;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
}

<div>
  <div id="popup">
    I'm gonna appear smoothly after 5 seconds
  </div>
  <p> Website content </p>
</div>

3 个解决方案

#1

"Display" is not animatable CSS property. Instead, try using "Visibility".

“Display”不是动画的CSS属性。相反,试着用“可见性”。

var element = document.getElementById("popup");

var t=setTimeout(openPopUp,5000);
function openPopUp() {
  element = document.getElementById("popup");
  element.style.visibility = "visible";
  element.style.opacity = "1";
}

#popup{
  position: fixed;
  height:100%;
  background-color: green;
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
}

<div>
  <div id="popup">
    I'm gonna appear smoothly after 5 seconds
  </div>
  <p> Website content </p>
</div>

#2

Why don't you set display: block; from the beggining? Add a z-index to move it to the background too and change it after. Check it out:

为什么不设置display: block;从发出召唤吗?添加一个z索引，将其移到后台，然后更改它。检查一下:

var element = document.getElementById("popup");

var t=setTimeout(openPopUp,5000);
function openPopUp() {
  element = document.getElementById("popup");
  element.style.opacity = "1";
  element.style.zIndex  = "1";
}

#popup{
  position: fixed;
  height:100%;
  background-color: green;
  display: block;
  opacity: 0;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
  z-index:-1;
}

<div>
  <div id="popup">
    I'm gonna appear smoothly after 5 seconds
  </div>
  <p> Website content </p>
</div>

#3

You can use the JQuery function FadeIn in your setTimeout

您可以在setTimeout中使用JQuery函数FadeIn。

var timer = setTimeout(function(){
    element.FadeIn('slow');
}, 5000);

#1