Анимация плавного перехода между страницами

Создаю сайт на Django с применением HTML, CSS и JavaScript.

Весь js генерировал через ChatGPT, т.к в интернете не нашел ничего того, что меня бы устроило.

Объясняю проблему: по задумке когда я нажимаю на ссылку, экран начинает белеть, и в этот момент происходит переход на другую страницу, где белый экран постепенно исчезает и возвращается к обычному состоянию. По моим скриптам все работает, кроме одного момента: при переходе с других страниц на основную анимация спада белого экрана отсутствует, и страница загружается мгновенно. Если, например, перейти со второй страницы на третью, анимация работает как положено.

Вот все используемые мной скрипты:

  1. script.js
document.querySelectorAll('.transition-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault(); // Отменяем стандартное действие ссылки

        const targetUrl = this.href; // Получаем URL из ссылки

        document.body.classList.add('fade-out'); // Добавляем класс для затухания

        // Ждем завершения анимации перед переходом
        setTimeout(() => {
            window.location.href = targetUrl; // Переходим на новую страницу
        }, 500); // Время должно совпадать с временем затухания
    });
});
  1. Скрипт с главной страницы
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        // Добавляем класс для анимации появления
        document.body.classList.add('fade-in');

        // Убираем класс через небольшую задержку, чтобы сработала анимация
        setTimeout(() => {
            document.body.classList.remove('fade-in');
        }, 10); // Небольшая задержка
    });

    document.querySelectorAll('.transition-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault(); // Отменяем стандартное действие ссылки
            const targetUrl = this.href; // Получаем URL из ссылки

            document.body.classList.add('fade-out'); // Добавляем класс для затухания

            // Ждем завершения анимации перед переходом
            setTimeout(() => {
                window.location.href = targetUrl; // Переходим на новую страницу
            }, 500); // Время должно совпадать с временем затухания
        });
        });
    </script>

Скрипт со второй страницы:

    <script>
        window.addEventListener('load', () => {
            // Добавляем класс для анимации появления
            document.body.classList.add('fade-in');
    
            // Убираем класс через небольшую задержку
            setTimeout(() => {
                document.body.classList.remove('fade-in');
            }, 10); // Небольшая задержка
        });
    </script>

Часть моего css:

body {
    transition: opacity 0.5s ease;
    opacity: 1;
}    

.fade-out {
    opacity: 0;
}

.fade-in {
    opacity: 0;
}

Хочу добавить, что помимо этой проблемы мне нужно исправить активацию анимации при загрузке страницы. То есть, когда я открываю сайт, анимация запускается, хотя перехода между страницами не было.

Вернуться на верх