javascript - Barba.js (v2.9.7) 重新加载当前页面而不是下一页

Question

我是第一次尝试使用 Barba.js。我基本上只希望每个页面都有一个转换(显示 data.next.namespace 的转换 div 滑入和滑出)。唯一的异常(exception)是预加载屏幕仅在首页加载时出现一次。

once Hook 有效，但我对 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

我意识到我以完全错误的方式定义了钩子(Hook)。

从 enter(data){} 更改为 enter({ current, next }) 并将 data.next.namespace 更改为 next.container.dataset.barbaNamespace 为我解决了这个问题。