Question

我想做什么：

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

我搜索了很多并获得了很多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

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

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

淡出，淡入页面之间

1 个答案: