淡出，淡入頁面之間

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