ページBをフェードアウトしてフェードインする方法は？ JavaScriptでのみ

Question

私が何をしたい：ページAで

1. 、例えば多くのページへのリンクがありますページB、ページCなど

2. 私はリンクをクリックすると、私はフェードアウトする現在のページをしたいとフェードインするための新しいページ。

私は多くのことを検索し、たくさんのですjqueryのソリューション - 彼らはうまく動作しますが、私はどのようにバニラでこれを行うことができるかを知りたいjavascriptのみ。私は自分でそれを解決しようとしましたが、うまくいきません。私はすでにコンソールエラーをチェックし、JSスクリプトをフッターに入れました。

document.addEventListener("click", "a", function() { 

// get the href attribute 
    var newUrl = this.attr("href"); 

// veryfy if the new url exists or is a hash 
if (!newUrl || newUrl[0] === "#") { 
    // set that hash 
    location.hash = newUrl; 
    return; 
} 

// now, fadeout the html (whole page) 
document.querySelector("html").fadeOut(function() { 
    // when the animation is complete, set the new location 
    location = newUrl; 
}); 

// prevent the default browser behavior. 
return false; 
});} 

Answer 1

はバニラJavaScriptで完了します。

リンクをクリックすると、コードスニペットはフェードアウトアニメーションが完了するまで次のページのデフォルトの読み込みを遅らせます。

document.querySelector("a").addEventListener("click", function() { 

    event.preventDefault(); 
// get the href attribute 
var newUrl = this.getAttribute("href"); 
document.querySelector("body").addClass("fade-out"); 

// verify if the new url exists or is a hash 
if (!newUrl || newUrl[0] === "#") { 
    // set that hash 
    location.hash = newUrl; 
    return; 
} 

// now, fadeout the html (whole page). You need to set the duration manually. 
//if you have an animation that lasts .5, 1 or 2 seconds etc, you need to put the duration below 

var animationDuration = 500; 
setTimeout(function() { 
    location = newUrl;}, animationDuration); 
});} 

Answer 2

モーダルポップアップ内でiframeを使用してページを開くことができます。

は、参考のために以下のリンクを参照してください： -

load iframe in bootstrap modal