淡出，淡入页面之间

Question

我想做的事：

1. 在页面A上，有许多页面的链接，例如页面B，页面C等。

2. 当我点击链接时，我希望当前页面淡出，新页面淡入。

我搜索了很多并得到了很多jquery解决方案 - 它们工作正常，但我想知道如何才能在vanilla javascript中做到这一点。 我试图在我自己的工作，但它不起作用。 我已经检查过控制台错误并将JS脚本放在页脚中。

document.addEventListener("click", function () {
    var newUrl = this.attr("href");

if (!newUrl || newUrl[0] === "#") {
    location.hash = newUrl;
    return;
}

document.querySelector("html").fadeOut(function () {
    location = newUrl;
});

return false;
});}

Answer 1

我发现这是一个简单而合适的解决方案。

CSS：

.animate-in {
    -webkit-animation: fadeIn .5s ease-in;
    animation: fadeIn .5s ease-in;
}
.animate-out {
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

将.animate-in添加到每个页面的正文中。

JS：

window.addEventListener("beforeunload", function () {
  document.body.classList.add("animate-out");
});