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> 

Answer 2

为什么不设置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> 

Answer 3

您可以在setTimeout使用JQuery函数FadeIn

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