Barba.js (v2.9.7) перезагружает текущую страницу вместо следующей

Question

Я впервые пытаюсь использовать Barba.js. Я в основном хочу только один переход для каждой страницы (отображение div перехода data.next.namespaceскользит внутрь и наружу). Единственное исключение - экран предварительной загрузки, появляющийся только один раз при загрузке первой страницы.

В once крючок работает, но у меня проблемы с defaultпереход. Когда я нажимаю на ссылку, консоль в DevTools не показывает ошибок, но загруженная страница всегда является текущей. Я использовал глобальный barba.hooks.enter в console.log следующий data.next.namespaceи он работает в течение доли секунды, прежде чем немедленно перезагрузить текущую страницу. (код ниже)

Я не знаю, что не так с моим кодом, и был бы признателен за вашу ценную помощь.

Заранее спасибо!

barba.init({
  transitions: [
    {
      name: "once-home",
      to: {
        namespace: "home",
      },
      once() {
       //Do something cool
      },
    },
    {
      name: "default",
      enter(data) {
        const transitionElem = document.querySelector(".transition ");
        const transitionTitle = document.querySelector(".transition_title ");
        transitionTitle.innerHTML = data.next.namespace;
        const tl = gsap.timeline({
          onComplete: () => {
            transitionTitle.innerHTML = "";
          },
        });

        tl
          .set(transitionElem, {
            clearProps: "all",
          })
          .set(transitionTitle, {
            x: 100,
          })
          .to(transitionElem, {
            duration: 1.5,
            x: "0",
            ease: "power4.inOut",
            onComplete: () => {
              data.current.container.style.display = "none";
            },
          })
          .to(
            transitionTitle,
            0.5,
            {
              x: 0,
              opacity: 1,
              ease: "power4.inOut",
            },
            0.1
          )
          .from(next.container, {
            duration: 0.1,
            opacity: 0,
            ease: "power2.inOut",
          })
          .to(
            transitionElem,
            {
              duration: 0.7,
              x: "100%",
              ease: "power4.inOut",
            },
            1
          )
          .to(
            transitionTitle,
            0.7,
            {
              x: -100,
              opacity: 0,
              ease: "power4.inOut",
            },
            0.8
          );
      },
    },
  ],
});

Answer 1

Я понял, что крючки у меня определены совершенно неправильно.

Переход от enter(data){} к enter({ current, next }) и data.next.namespace к next.container.dataset.barbaNamespace решил проблему для меня.