无法在 WordPress 站点中使用 Barba js 进行简单的页面转换

Question

I'm developing a custom theme for WP and need to make page transitions similar to this website https://www.instrument.com/我正在为 WP 开发自定义主题，需要进行类似于此网站https://www.instrument.com/的页面转换

Barba.js seems like a perfect solution for these purposes.对于这些目的， Barba.js似乎是一个完美的解决方案。 However, the entire DOM tree always refreshes instead of just the content.但是，整个 DOM 树总是会刷新，而不仅仅是内容。

Here is what I have:这是我所拥有的：

header.php

<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <?php wp_head();?>
  </head>
  <body data-barba="wrapper"
    <?php
      if ( get_field('is_dark_theme') ) {
        body_class( 'bg-dark text-light' );
      } else {
        body_class();
      }
      ?>
  >

  <nav>
    ...
  </nav>

  <main data-barba="container" data-barba-namespace="home">

footer.php

    </main>
  </div>

  <?php wp_footer();?>

  </body>
</html>

In my main script file which is injected right before the closing of the body tag, I have the following:在 body 标记结束之前注入的主脚本文件中，我有以下内容：

(function () {
  barba.init({
    transitions: [{
      name: 'default-transition',
      leave() {
        console.log('leave');
      },
      enter() {
        console.log('enter');
      }
    }]
  });
})();

When I click on the link in the navbar, there is a leave console output but then the entire page is loaded again as if Barba was never there.当我单击导航栏中的链接时，有一个leave控制台 output，但随后整个页面再次加载，就好像 Barba 从未出现过一样。 I never see enter output.我从来没有看到enter output。

Is it possible to use Barba with WP in the first place?是否可以首先将 Barba 与 WP 一起使用？ If so, what am I doing wrong?如果是这样，我做错了什么？

I appreciate your help.我感谢您的帮助。

Answer 1

Turns out the problem was with the default timeout in Barba.事实证明问题出在 Barba中的默认超时。 It was set to 2000ms and my pages took longer than that.它被设置为 2000 毫秒，我的页面花费的时间比这更长。 If the page takes longer than the timeout, Barba gives up and the entire page refreshes.如果页面花费的时间超过超时时间，Barba 将放弃并刷新整个页面。

I've set the timeout to a higher value and it works perfectly.我已将超时设置为更高的值，并且效果很好。

无法在 WordPress 站点中使用 Barba js 进行简单的页面转换

问题描述

1 个解决方案

解决方案1
0 2020-10-26 14:42:49

无法在 WordPress 站点中使用 Barba js 进行简单的页面转换

问题描述

1 个解决方案

解决方案1 0 2020-10-26 14:42:49

解决方案1
0 2020-10-26 14:42:49