Barba - にほんご。

View

リンクをクリックすると、 console.logに各イベントのパラメータを表示します。


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 Homepage = Barba.BaseView.extend({
  namespace: 'homepage',
  onEnter: function() {
    // 新しいコンテナは準備が出来たタイミング。DOMに含まれています。
    console.log('onEnter : homepage');
  },
  onEnterCompleted: function() {
    // ページ遷移が終了したタイミング。
    console.log('onEnterComplete: homepage');
  },
  onLeave: function() {
    // 新しいページへの遷移が開始されたタイミング。
    console.log('onLeave: homepage');
  },
  onLeaveCompleted: function() {
    // コンテナがDOMから削除されたタイミング。
    console.log('onLeaveCompleted: homepage');
  }
});
 
// viewの初期化を忘れないで!
Homepage.init();