javascript - 如何在对底层 Div 产生模糊效果后获得模糊效果

Question

我已经为着陆页制作了模糊效果。然而，它也不太像预期的那样工作，我不确定为什么。

它很好地模糊了，问题在于当我希望底层 Div 出现时，我希望它“淡入”，因为它只是在淡出完成后出现。

这是一个片段:

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

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

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>
		<div id="intro">
			<div id="splash">

			<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> 

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

			</div>
		</div>

		<article id="content">
			
			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,

		</article>

	</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