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

あなたはbegginingからdisplay: block;を設定しないのはなぜあなたのsetTimeout

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

Answer 3

でjQueryの機能FadeInを使用することができますか？ 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>