如何在5秒后让弹出窗口顺畅显示？

Question

使用CSS3过渡属性和不透明度，弹出窗口将在5秒后平滑显示并覆盖整个屏幕，但它会同时出现。

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

“显示”不是可动画的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>

Answer 2

为什么不从开始设置display: block;？添加z-index也可以将其移动到后台并在之后进行更改。看看：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以在FadeIn

中使用JQuery函数setTimeout

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