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;
};