如何淡出A页和淡入B页？仅在javascript中

debugcn 发表于 Dev

肖恩·波（Sean Poh）

我想做的事：

在页面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;
});}

肖恩·波（Sean Poh）

在香草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);
});}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。