Как получить размытие после эффекта размытия на основе Div

Question

Я собрал размытие/в действие для целевой страницы. Однако это не совсем работает, как это предполагается, и я не уверен, почему.

Это черное изящество, проблема заключается в том, когда я хочу, чтобы базовое Div появлялось, я бы хотел, чтобы это «затухало», поскольку оно стоит, оно появляется только после того, как окончание исчезнет.

Вот отрывок:

splash = document.getElementById('intro'); 
 
content = document.getElementById('content'); 
 

 
\t function enterSite (element) { 
 
\t \t opac = 1; 
 
\t \t fps = 1000/30; 
 
\t \t function decrease() { 
 
\t \t \t opac -= 0.02; 
 
\t \t \t if (opac <= 0.1){ 
 
\t \t \t \t splash.style.display = 'none'; 
 
\t \t \t \t return true; 
 
\t \t \t } 
 
\t \t splash.style.opacity = opac; 
 
\t \t setTimeout(decrease,fps); 
 
\t \t } 
 
\t \t function increase() { 
 
\t \t \t opac += 0.02; 
 
\t \t \t if (opac >= 0.1){ 
 
\t \t \t \t content.style.display = 'block'; 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t content.style.opacity = opac; 
 
\t \t setTimeout(increase,fps); 
 
\t \t } 
 
\t \t decrease(), increase(); 
 
\t }

html, body { 
 
    overflow: hidden; 
 
} 
 
main { 
 
    width: 100%; 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 
#intro { 
 
    background-image: url(Images/splash.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    display: flex; 
 
    text-align: center; 
 
    height: 100vh; 
 
} 
 
#splash { 
 
    margin: auto; 
 
    width: 40%; 
 
    background-color: rgba(56,56,56,0.4); 
 
    border-radius: 50px 50px; 
 
} 
 
#splash-p { 
 
    width: 70%; 
 
    font-size: 1.2em; 
 
    line-height: 1.5em; 
 
    margin: auto; 
 
    text-align: center; 
 
    padding-top: 10px; 
 
    color: #fff; 
 
} 
 
.btn { 
 
    width: 35%; 
 
    margin: auto; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
/* Main Content Page */ 
 

 
article { 
 
    position: absolute; 
 
    height: 100vh; 
 
    background-color: red; 
 
}

<main> 
 
\t \t <div id="intro"> 
 
\t \t \t <div id="splash"> 
 

 
\t \t \t <p id="splash-p">Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing.</p> 
 

 
\t \t \t <input type="image" src="Images/Button.png" class="btn" onclick="enterSite()"> 
 

 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <article id="content"> 
 
\t \t \t 
 
\t \t \t Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing, 
 

 
\t \t </article> 
 

 
\t </main>

Answer 1

Я думаю, что вы могли бы извлечь выгоду из ломать вещи немного больше и не гнездятся так много функций и вызовов. Кроме того, может быть полезно использовать setInterval() вместо повторения setTimeout().

splash = document.getElementById('intro'); 
content = document.getElementById('content'); 
var fadeOut = null; 
var fadeIn = null; 
opac = 1; 
fps = 1000/30; 

function increase() { 
    content.style.opacity = opac; 
    opac += 0.02; 

    if (opac >= 1){ //Opacity is 100% 
     window.clearInterval(fadeIn); //Stop fade-in 
    } 

} 

function decrease() { 
    splash.style.opacity = opac; 
    opac -= 0.02; 

    if (opac < 0.1){ //If object is almost gone 
     splash.style.display = 'none'; //Hide it completely 
     window.clearInterval(fadeOut); //Stop fade-out 

     content.style.display = 'block'; //Set up new content 
     content.style.opacity = 0; 
     fadeIn = setInterval(increase, fps); //Begin fade-in 

    } 
} 

function enterSite() { 
    fadeOut = setInterval(decrease, fps); //Start the fadeout 
} 

JSFiddle