Ванильная JS анимация?

Question

Как и в вопросе, у меня есть код:

$(document).on('click', '.link-fade', function (event) {
event.preventDefault();
var link = this;
$('body').fadeOut(function () {
location.href = link.href;
});
});

Он написан с использованием библиотеки Jquery, но я хочу написать ее без нее (я знаю, что вы должны использовать addEventlistener et c. И XHR, но я не знаю, как использовать XHR) Как написать этот код без Jquery?

А вот код CSS (анимация):

body {
-webkit-animation: fadeIn 1s ease-in;
animation: fadeIn 1s ease-in;
}

@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

Answer 1

Вы можете использовать свойства transition и opacity CSS.

Сначала определите на своей странице следующее CSS:

body { transition: opacity 400ms }

Это гарантирует, что если вы изменяете opacity тела, оно будет иметь эффект затухания.

Прослушивая событие transitionend, вы можете выполнить ожидаемое навигационное действие после завершения перехода.

Наконец, делегирование события может быть сделано путем добавления проверки класса внутри обработчика события: если событие не произошло в элементе класса «link-fade», просто выйдите из обработчика:

document.addEventListener('click', function (event) {
    if (!event.target.classList.contains("link-fade")) return; 
    event.preventDefault();
    var link = event.target;
    document.body.style.opacity = 0;
    document.body.addEventListener("transitionend", function () {
        location.href = link.href;
    });
});

NB: this в обработчике событий будет document. Элемент, по которому щелкнули, - event.target.

Answer 2

Создайте анимацию для тела fadeOut после щелчка и примените его к телу с классом .fade-out-body, затем вы можете блокировать перенаправление по щелчку (e.preventDefault()), добавить этот класс в тело fadeOut, дождаться окончания анимации sh и затем после этого вы можете изменить местоположение страницы (как вы делаете в jQuery прямо сейчас). При загрузке вы можете добавить анимацию, которую вы написали выше, и они должны работать вместе (fadeOut после щелчка и fadeIn при загрузке).

function fadeOutRedirect(e) {
    e.preventDefault();
    /* Add class - it should fade out body */
    document.body.classList.add('fade-out-body');

    /* After 1000ms redirect to the new subpage */
    const newLocation = e.target.src 
    setTimeout(function(){ 
        location.href = newLocation;    
    }, 1000);

}

var fadeOutLinks = document.querySelectorAll('.link-fade');
Array.prototype.forEach.call(fadeOutLinks, function (el, i) {
    el.addEventListener('click', fadeOutRedirect);
});

Это не оптимальное решение - потому что мы на самом деле не загружаем контент только откладывая это, но чтобы избежать этого, вам нужно использовать XHR. Но это решение, подобное используемому в jQuery.