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

【问题标题】：Cannot make a simple page transition work with Barba js in a WordPress site无法在 WordPress 网站中使用 Barba js 进行简单的页面转换
【发布时间】：2020-10-26 09:04:17
【问题描述】：

我正在为 WP 开发自定义主题，需要进行类似于本网站的页面转换https://www.instrument.com/

Barba.js 似乎是这些目的的完美解决方案。但是，整个 DOM 树总是会刷新，而不仅仅是内容。

这是我所拥有的：

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>

在正文标记关闭之前注入的主脚本文件中，我有以下内容：

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

当我单击导航栏中的链接时，有一个leave 控制台输出，但随后整个页面再次加载，就好像Barba 从未出现过一样。我从来没有看到enter 输出。

是否可以首先将 Barba 与 WP 一起使用？如果是这样，我做错了什么？

感谢您的帮助。

【问题讨论】：

标签： php wordpress barbajs

【解决方案1】：

原来问题出在 Barba 的 the default timeout 上。它设置为 2000 毫秒，而我的页面花费的时间比这更长。如果页面花费的时间超过了超时时间，Barba 就会放弃并刷新整个页面。

我已将超时设置为更高的值，并且效果很好。

【讨论】：