動画で学ぶ
基本コード
<body data-barba="wrapper">
<!-- put here content that will not change
between your pages, like <header> or <nav> -->
<main data-barba="container" data-barba-namespace="home">
<!-- put here the content you wish to change
between your pages, like your main content <h1> or <p> -->
</main>
<!-- put here content that will not change
between your pages, like <footer> -->
</body>
barba.init({
transitions: [{
name: 'default-transition',
leave() {
// ここで素晴らしい退出アニメーションを作成しましょう
},
enter() {
// ここで素晴らしいエンターアニメーションを作成しましょう
}
}]
});
GSAPを使用した例
barba.init({
transitions: [{
name: 'opacity-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0
});
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
構文
barba.init({
cacheFirstPage: false,
cacheIgnore: false,
debug: false,
logLevel: 'off',
prefetchIgnore: false,
prevent: null,
preventRunning: false,
schema: [[SchemaAttribute]],
timeout: 2e3,
transitions: [],
views: [],
})
cacheFirstPage
最初にレンダリングされたページのキャッシュを無効にする。cacheFirstPage戦略を参照
| 型 | 初期値 |
|---|---|
| boolean | false |
cacheIgnore
キャッシュを無効にするか、一部のルートを無視します。cacheIgnore戦略を参照してください。
| 型 | 初期値 |
|---|---|
| boolean | String |
debug
logLevel
prefetchIgnore
prevent
preventRunning
requestError
Schema スキーマ
すべての data-barba 属性を簡単にオーバーライドできます。
data-barba 属性の設定を変える
barba.init({
schema: {
prefix: 'data-custom',
wrapper: 'wrap'
}
});
views カスタムアニメーション
namespaceを使ったページごとに固有の設定は、viewsプロパティに記述。
barba.init({
views: [{
namespace: 'home',
beforeEnter() {
// ユーザーナビゲーションに基づいてメニューを更新する
menu.update();
},
afterEnter() {
// 新しいページのコンテンツに基づいて視差を更新します
parallax.refresh();
}
}]
});
Transitions ライフサイクル
各フックは順番に実行される。同期モード(sync)が有効な場合、leaveとenterが同時に実行されるため順番は異なる。
順番：before→enter/leave→after
基本のフック
| Order | 名前 | 説明 | Transitions | Views |
|---|---|---|---|---|
| 1 | beforeOnce |
ブラウザの初回読み込みに一度だけ | x | |
| 2 | once |
現在のページを一度遷移（ブラウザの最初の読み込み） | x | |
| 3 | afterOnce |
ブラウザの初回遷移後一度だけ | x | |
| 4 | before |
遷移前 | x | |
| 5 | beforeLeave |
leaveの前 |
x | x |
| 6 | leave |
現在のページから遷移する | x | |
| 7 | afterLeave |
去る(leave)アニメーション後 | x | x |
| 8 | beforeEnter |
入るアニメーション前 | x | x |
| 9 | enter |
次のページへの移行する | x | |
| 10 | afterEnter |
入るアニメーション後 | x | x |
| 11 | after |
全部の後 | x |
同期モード
Leave フックと Enter フックを「一緒に再生」するかどうかを示すモード。(前のページと次のページを同時に表示するなど)
同期モードはデフォルトでは無効になっていますが、同期オプションを使用して簡単に有効にできます。
barba.init({
transitions: [{
sync: true,
leave() {
// 「leave」と同時に再生されるトランジション
},
enter() {
// 「enter」と同時に再生されるトランジション
}
}]
});