barba.js ページ別の設定方法

Question

barba.jsを使用してページ遷移時に簡単なアニメーションをつけてみたのですが
特定のページ毎のアニメーション設定の方法が分からず悩んでおります。

・下記のdiv内のみが遷移で変更されます。

<div class="barba-container" data-barba="container" data-namespace="page"> ～ </div>

・<div class="wall"></div>を遷移時にアニメーションで使用しています。

・subpageのみページ上部トップにスクロールするように設定させたいです。
（現在だと全てのページ遷移後にもスクロールしてしまいます。）
他にもsubpageのみ適応するアニメーションを追加したいと思っています。

参考ページを調べると data-namespace="page" の名前空間で設定を分けられるようなのですがどう記述すれば良いのか分からずにいます。

<div data-barba="wrapper">
  <div class="barba-container" data-barba="container" data-namespace="home">
  ・
  ・
  ・
 </div>
</div>

<div class="wall"></div>

<div data-barba="wrapper">
  <div class="barba-container" data-barba="container" data-namespace="page">
  ・
  ・
  ・
 </div>
</div>

<div class="wall"></div>

barba.init({
  transitions: [{
    async leave() {
			let wall = document.querySelector(".wall");
			wall.classList.add('is-close');
			await new Promise((resolve) => {
			return setTimeout(resolve, 1000);
			});
    },
    enter() {
			let wall = document.querySelector(".wall");
			wall.classList.remove('is-close');
			$('html, body').animate({
                'scrollTop': 0
            }, 1500);
    }
  }]
});

どうぞよろしくお願いいたします。

Answer 1

未検証ですが、transitions を transitionsObj みたいに別のところに置いて、

必要なら init( transitionsObj ); を実行
不要なら init(); を実行

としてあげればいいのではないでしょうか？

const transitionsObj = {
  transitions: [{
    async leave() {
            let wall = document.querySelector(".wall");
            wall.classList.add('is-close');
            await new Promise((resolve) => {
            return setTimeout(resolve, 1000);
            });
    },
    enter() {
            let wall = document.querySelector(".wall");
            wall.classList.remove('is-close');
            $('html, body').animate({
                'scrollTop': 0
            }, 1500);
    }
  }]
};

// pageの場合
const page = Barba.BaseView.extend({
  namespace: 'page'
});
page.init( transitionsObj );

// homeの場合
const home = Barba.BaseView.extend({
  namespace: 'home'
});
home.init();