javascript - 如何让我的弹出窗口在 5 秒后顺利出现？

Question

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

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>

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>