Какую библиотеку выбрать для плавных переходов?

Question

[Юрий Иванов]

Какую библиотеку выбрать для плавных переходов между страницами? (spa, на чистом js)
я новичок, поэтому я немного не понимаю, что мне выбрать, что актуальное, что приятнее в использовании
barba js не предлагайте, пожалуйста

Comments

[Ivan Bogachev]

что мне выбрать, что актуальное... barba js не предлагайте, пожалуйста

Barba.js остается самым популярным вариантом вне мира react/vue/angular уже многие годы, и чего только с ней не делают. Уточните вопрос, почему этот инструмент вам не подходит?

[Юрий Иванов]

Ivan Bogachev, барба не подгружает жс файлы повторно. Условно если я со страницы 1 ушел на страницу 2,а затем вернулся на страницу 1, то весь джаваскрипт код который был у меня на странице 1 не обрабатывается повторно. Это довольно распространенная проблема, почитав форум гсапа и стаковерфлов, я выяснил, что в основном эту проблему решают обертыванием жс кода в глобальную функцию и вызовом этого кода при помощи глобального барба жс хука. Все что касается дом слушателей

document.addEventListener('click', (e) => {
  if(e.target.closest('.nav-list__linkLOGIN')) {
  renderPopup();
  }
});

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

function createDessertIItem () {
  for(let i=0; i <dessertName.length; i++) {
    let newItem = document.createElement('div');
    newItem.className = ('desserts__item');
    const itemText = `
    <div class="item desserts__item">
    <img draggable="false"
      src="${(dessertImg[i])}"
      alt="desserts"
      class="item__image desserts__image"
    />
    <div class="item__name desserts__name"
    >${(dessertName[i])}</div
    >
    <div class="item__descr desserts__descr"
    >${(dessertDescr[i])}</div
    >
    <div class="item__bottom_choise">
    <button  class="btnchoise desserts__button">Выбрать</button>
    <div class="item__costs desserts__costst" data-price="${(dessertPrice[i])}">${(dessertCosts[i])}</div>
    </div>
    </div>`;
    newItem.innerText = itemText;
    desserts.insertAdjacentHTML('beforeend', itemText)
  }
}

этот код не срабатывает в глобальном хуке, ну и сама мысль того, что мне надо какие-то части моего жс кода оборачивать в функцию и вызывать её в глобальном хуке мне не не нравится. Поэтому я ищу вариант, где мой жс код будет вызываться каждый раз при рендеренги нового контента(отрисовки другой страницы)
Я буквально месяц изучаю джаваскрипт, возможно я пишу полную ересь и я не прав, буду очень благодарен, если вы меня хотя бы на правильную мысль натолкнете.

Answer 1

[NowebNolife]

Лучше поздно, чем никогда.

Самый простой и производительный вариант - swup.js .
Встраивается во что угодно за пару минут + имеет огромное кол-во ивентов, для перезагрузки js (а также отдельный плагин). Анимацию можно реализовать как на чистом css, так и с помощью GSAP.

Примеры сайтов, использующих swup:
Panasonic
Raiffeisen Bank
Plan-k

Не без косяков конечно.
Порой приходится знатно поколдовать, чтобы заставить его работать с подключаемым извне кодом (прим: виджеты b24, скрипты метрик и т.д..);