如何淡出頁面A並淡入頁面B？在JavaScript中只有

Question

我想要做什麼：

1. 網頁A上有鏈接例如很多頁網頁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