🧸

Barba.js v2 ページ毎でjs実行

2022/02/15に公開

Barba.jsでページ毎に実行したいjsがある場合の記述を記録として残します。

js/index
barba.init({
    views: [{
        namespace: 'about',
	afterEnter(data) {
            console.log("Enter発火")
        },
        beforeLeave(data) {
            console.log("Leave発火")
        }
    }]
});

viewsを使うことによってページ毎で実行したいものがある場合は、好きなタイミングで発火させることができるようです。

以下、それぞれのタイミングについて

beforeOnce
読み込み前(初期読み込み時)

beforeOnce
読み込み完了(初期読み込み時)

afterOnce
読み込み完了後(初期読み込み時)

before
ページ遷移の始まり

beforeLeave
ページ遷移の前

leave
現在のページの離脱

afterLeave
現在のページの離脱後

beforeEnter
次ページに入る前

enter
次ページに入った時

afterEnter
次ページに入った後

after
すべて完了

Discussion