プリローダーがフェードアウトしてコンテンツがフェードインします

これは簡単に修正できると確信しています。私はプリローダーがゆっくりとフェードアウトする必要があります。私はCSSアニメーションで試しましたが、うまくいきませんでした。誰かが私にjavascriptでどうすればいいのか教えてもらえますか？例のように、遷移は非常に粗いです。私はそれを望んでいない。プリローダーがフェードアウトしてコンテンツがフェードインします

<script> <!--Preloader--> 
var myVar; 

function preloader() { 
    myVar = setTimeout(showPage, 1500); 
} 

function showPage() { 
    document.getElementById("preloader").style.display = "none"; 
    document.getElementById("wrapper").style.display = "block"; 
} 
</script>

表示ブロックとなしと

CODEPEN EXAMPLE

出典

2016-06-29 pHenomen

あなたのコードに次の変更を追加します。

#preloader { 
    transition:1s ease; 
} 

#wrapper { 
    opacity:0;/*Remove display and hide opacity*/ 
} 

function showPage() { 
    document.getElementById("preloader").style.opacity = 0; 
    document.getElementById("wrapper").style.opacity = 1; 
}

出典

2016-06-29 11:08:01 frnt

遷移doent作業..

使用

var myVar; 

function preloader() { 
    myVar = setTimeout(showPage, 1500); 
} 

function showPage() { 
    document.getElementById("preloader").style.opacity = 0; 
    document.getElementById("wrapper").style.opacity = 1; 
}

と

#preloader { 
    position: absolute; 
    z-index: 1000; 
    background-color:black; 
    width: 100vw; 
    height: 100vh; 
    color:white; 
    transition: 0.5s all linear 
}

出典

2016-06-29 10:56:43

あなたはdisplaをアニメーション化することはできませんy：noneそれ自体は、不透明度をアニメートすることです（0など）。不透明度はまだその追加不透明た後は0である一方で、ブロック：1と

出典

2016-06-29 10:57:06

月があなたを助けます。この例を試してみてくださいすることをアニメーション化

あなたは、ディスプレイを追加します。

$(function() { 
 
    $("#loader-image").fadeIn(500, function() { 
 
    $("#loader-image").fadeOut(1000, function() { 
 
     $(".loader-container").fadeOut(1000, function() { 
 
     alert("loaded!"); 
 
     }); 
 
    }); 
 
    }); 
 
});

body { 
 
    background-color: black; 
 
} 
 
.loader-container { 
 
    background-color: yellow; 
 
    height: 200px; 
 
} 
 
#loader-image { 
 
    display: none; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="loader-container"> 
 
    <img src="image.png" alt="Image" id="loader-image" /> 
 
    </div> 
 
</body>

出典

2016-06-29 10:58:31

CSSトランジションを使用できます。隠されたクラスのスタイルを追加

#preloader { 
    position: absolute; 
    z-index: 1000; 
    background-color:black; 
    width: 100vw; 
    height: 100vh; 
    color:white; 
    display: block; 
    opacity: 1; // Add opacity 
    transition: 1s opacity ease-in; // Add transition 
}

：：へのあなたのプリローダーのスタイルを変更し

#preloader.hidden { 
    opacity: 0; 
}

次にあなたが

function showPage() { 
     // Add the newly defined hidden class to the preloader element 
     document.getElementById("preloader").classList.add('hidden'); 
}

Here呼び出すとき実施例です。

出典

2016-06-29 11:15:45

プリローダーがフェードアウトしてコンテンツがフェードインします

答えて

関連する問題