如何淡出页面A并淡入页面B？仅在 javascript 中答案

【问题标题】：How to fade out page A and fade in page B? In javascript only如何淡出页面A并淡入页面B？仅在 javascript 中
【发布时间】：2016-12-13 07:16:59
【问题描述】：

我想做什么：

在页面 A 上，有许多页面的链接，例如B页、C页等
当我点击一个链接时，我希望当前页面淡出，新页面淡入。

我搜索了很多，得到了很多 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;
});}

【问题讨论】：

什么“不起作用”？
addEventListener - 第二个参数“a”？这不是 jquery :)
@qxz - 我不太清楚为什么页面没有在点击时淡出以及为什么下一页没有淡入
@pawel - 哦，你是对的！错过了那个。
.fadeOut 是一个 jQuery 函数，在普通的 HTMLElement 上不起作用。有关潜在的解决方案，请参阅this question。 .attr 相同：使用 getAttribute(developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute)。如果您查看控制台错误，您应该会发现这些不是功能......

标签： javascript

【解决方案1】：

在原版 javascript 中完成。

当你点击一个链接时，代码 sn -p 会延迟下一页的默认加载，直到淡出动画完成。

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);
});}

【讨论】：

【解决方案2】：

您可以在模态弹出窗口中使用 iframe 并可以在其中打开页面。

请参阅以下链接以供参考：-

load iframe in bootstrap modal

【讨论】：