Ниже пример функции для загрузки страниц с плавной анимацией исчезновения и появления:
async function pageUpdate(event) {
// Если функция вызвана без аргументов:
if (typeof event == 'undefined') {
// Устанавливаем обработчики
// на все ссылки на странице:
$('a[href]').click(pageUpdate);
}
// Если функция вызвана
// в результате клика
// по ссылке:
else {
// Берём адрес с нажатой ссылки
// и записываем в переменную link:
var link = event.target.href;
// Если ссылка ведет на наш сайт:
if (link.includes(location.host)) {
// Предотвращаем переход:
event.preventDefault();
// Блокируем страницу, чтобы
// больше нельзя было кликать:
$('body').css('pointer-events', 'none');
// Активируем анимацию
// постепенного исчезновения
await $('body').animate({ opacity: 0 }, 1000).promise();
// Грущим новую страницу AJAX-ом без
// фактиечской перезагрузки текущей:
var html = await $.ajax(link);
var doc = new DOMParser().parseFromString(html, 'text/html');
var html = $('body', doc).html();
history.pushState(null, null, link);
$('body').html(html);
// Заново ставим
// обработчики:
pageUpdate();
// Активируем анимацию
// постепенного появления:
await $('body').animate({ opacity: 1 }, 1000).promise();
// Снимаем блокировку с документа:
$('body').css('pointer-events', '');
}
}
}
pageUpdate();
Функция перехватывает клики по ссылкам, добавляет анимацию и обновляет контент страницы без перезагрузки.
