search

hysryt / wiki

https://hysryt.github.io/wiki/
0 stars 0 forks source link

barba.js #189

Open hysryt opened 3 years ago

hysryt commented 3 years ago

https://barba.js.org/

hysryt commented 3 years ago

ライフサイクル

ページ遷移のライフサイクル

  1. before
  2. beforeLeave
  3. leave
  4. afterLeave
  5. 次のページがDOMに追加
  6. beforeEnter
  7. enter
  8. afterEnter
  9. 前のページがDOMから削除
  10. after

5から9の間は前のページと次のページが同時にDOM上に存在している。

※ syncモードの場合はまた異なるので注意

hysryt commented 3 years ago

例

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@barba/core"></script>
</head>
<body>
    <div data-barba="wrapper">
        <div data-barba="container" data-barba-namespace="index">
            <a href="next.html">next</a>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

next.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/@barba/core"></script>
</head>
<body>
    <div data-barba="wrapper">
        <div data-barba="container" data-barba-namespace="next">
            <a href="index.html">index</a>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

script.js

barba.init({});
hysryt commented 3 years ago

Transition

leave - 現在のページを離れるときに実行される enter - 次のページに入るときに実行される

barba.init({
  transitions: [{
    leave() {
      // 現在のページを離れるときの処理
    },
    enter() {
      // 次のページに入るときの処理
    }
  }]
});

それぞれの関数は Promise オブジェクトを返すことができる。

const $wrapper = $('[data-barba="wrapper"]');
barba.init({
  transitions: [{
    leave() {
      return new Promise((resolve, reject) => {
        $wrapper.animate({opacity: 0}, 1000, () => {resolve()});
      });
    },
    enter() {
      $wrapper.animate({opacity: 1}, 1000);
    },
  }]
});

基本的には leave() の実行後 enter() が実行されるが、leave() が Promise を返す場合はその Promise が解決するのを待ってから enter() が実行される。 基本的には enter() の実行後前のページのDOMが削除されるが、enter() が Promise を返す場合はその Promise が解決するのを待ってから前のページのDOMが削除される。

jQuery の Promise を使っても動作するみたいが、正式にサポートしているかどうかはわからない。

const $wrapper = $('[data-barba="wrapper"]');
barba.init({
  transitions: [{
    leave() {
      return $wrapper.animate({opacity: 0}, 1000).promise();
    },
    enter() {
      $wrapper.animate({opacity: 1}, 1000);
    },
  }]
});
hysryt commented 3 years ago

Views

個々のページの beforeLeave、afterLeave、beforeEnter、afterEnter を指定する。

hysryt commented 3 years ago

x-barbaヘッダ

barbaによるリクエストには x-barba ヘッダが付与されている。

<?php
  if (isset($_SERVER['HTTP_X_BARBA'])) {
    // barbaによるリクエスト
  } else {
    // 直接リクエスト
  }