淡出，淡入页面之间

Question

What I want to do:

1. On page A, there are links to many pages eg page B, page C etc.

2. When I click on a link, I want the current page to fade out and the new page to fade in.

I searched a lot and got lots of jquery solutions - they work fine but I want to find out how I can do this in vanilla javascript only. I tried to work it out on -my own but it doesn't work. I've already checked for console errors and put the JS script in the footer.

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

I find this a simple and suitable solution.

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

Add .animate-in to the body of every page.

js:

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