HideShow

ページ1とページ2を切り替えます。

HTML

1.html

<div id="barba-wrapper">
  <div class="barba-container">
    <p>ページ1</p>
    <p>
      <a href="./2.html">ページ2を表示</a>
    </p>
  </div>
</div>

2.html

<div id="barba-wrapper">
  <div class="barba-container">
    <p>ページ2</p>
    <p>
      <a href="./1.html">ページ1を表示</a>
    </p>
  </div>
</div>

JavaScript

Barba.Pjax.start();
var HideShowTransition = Barba.BaseTransition.extend({
  start: function() {
    this.newContainerLoading.then(this.finish.bind(this));
  },

  finish: function() {
    document.body.scrollTop = 0;
    this.done();
  }
});

Barba.Pjax.getTransition = function() {
  return HideShowTransition;
};