Barba.jsメモ

https://barba.js.org/

# 動画で学ぶ

https://www.youtube.com/playlist?list=PLkEZWD8wbltmopvSzUvXw9itOosGXPEJ6

## 基本コード

```html
<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>
```

```javascript
barba.init({
  transitions: [{
    name: 'default-transition',
    leave() {
      // ここで素晴らしい退出アニメーションを作成しましょう
    },
    enter() {
      // ここで素晴らしいエンターアニメーションを作成しましょう
    }
  }]
});
```

GSAPを使用した例

```javascript
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
      });
    }
  }]
});
```

## 構文

```javascript
barba.init({
  cacheFirstPage: false,
  cacheIgnore: false,
  debug: false,
  logLevel: 'off',
  prefetchIgnore: false,
  prevent: null,
  preventRunning: false,
  schema: [[SchemaAttribute]],
  timeout: 2e3,
  transitions: [],
  views: [],
})
```

### cacheFirstPage
最初にレンダリングされたページのキャッシュを無効にする。[cacheFirstPage](https://barba.js.org/docs/advanced/strategies/)戦略を参照

| 型 | 初期値 |
|:-:|:-:|
|boolean|`false`|

### cacheIgnore
キャッシュを無効にするか、一部のルートを無視します。[cacheIgnore](https://barba.js.org/docs/advanced/strategies/)戦略を参照してください。

| 型 | 初期値 |
|:-:|:-:|
|boolean | String | String[]|`false`|

### debug

### logLevel

### prefetchIgnore

### prevent

### preventRunning

### requestError


## Schema スキーマ

すべての data-barba 属性を簡単にオーバーライドできます。
[data-barba 属性の設定を変える](https://github.com/barbajs/barba/blob/main/packages/core/src/schemas/attribute.ts)

```javascript
barba.init({
  schema: {
    prefix: 'data-custom',
    wrapper: 'wrap'
  }
});
```

## views カスタムアニメーション

`namespace`を使ったページごとに固有の設定は、`views`プロパティに記述。

```javascript
barba.init({
  views: [{
    namespace: 'home',
    beforeEnter() {
      // ユーザーナビゲーションに基づいてメニューを更新する
      menu.update();
    },
    afterEnter() {
      // 新しいページのコンテンツに基づいて視差を更新します
      parallax.refresh();
    }
  }]
});
```

## Transitions ライフサイクル
各フックは順番に実行される。同期モード(sync)が有効な場合、`leave`と`enter`が同時に実行されるため順番は異なる。
順番：`before`→`enter/leave`→`after`

[Lifecycle](https://barba.js.org/docs/getstarted/lifecycle/)

#### 基本のフック
|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 フックを「一緒に再生」するかどうかを示すモード。(前のページと次のページを同時に表示するなど)
同期モードはデフォルトでは無効になっていますが、同期オプションを使用して簡単に有効にできます。

```javascript
barba.init({
  transitions: [{
    sync: true,
    leave() {
      // 「leave」と同時に再生されるトランジション
    },
    enter() {
      // 「enter」と同時に再生されるトランジション
    }
  }]
});
```