[発展]スムーズなページ遷移を実装しよう

negl では SPA モードでの画面遷移（画面ロードなく他のページに遷移する画面の遷移）が用意されています。 今回は SPA モードの基本的な実装方法について紹介します。

サンプルサイト

以下の２つのサイトは SPA モードでの画面遷移が行われています。 その為、ページを遷移しても画面リロードはなくより洗礼された Web サイトになっています。

SPA モードの有効化

まず、SPA モードを有効にするためには config.transition.spaMode オプションを true に設定してください。

const { start } = setup({ transition: { spaMode: true } });

これで、SPA モードが有効になり、以下で紹介する機能が実行される状態になります。

SPA モードの概要

まずは具体的な実装の方法を見ていく前に SPA モードの画面遷移がどのように行われるのかについて説明します。 SPA モードの画面遷移は大きく分けて次の２つの工程で構成されます。

以上が SPA で画面遷移する際の概要となります。面倒な処理は negl が裏で自動的に行うため、ユーザーは画面遷移のアニメーションの実装に集中することができます。

では、それぞれの工程についてより詳しく見ていきましょう。

トランジションタイプの決定

トランジションタイプを決定する方法は以下の３つです。

1. リンク、またはエフェクトに個別設定
2. デフォルトトランジションタイプの設定
3. JS からトランジションタイプを設定

1. リンク、またはエフェクトに個別設定

リンクまたはエフェクトに data-trantion 属性を付けることで、リンクやエフェクトをクリックした際のトランジションタイプを指定することができます。例えば、次のようにして data-transition を付与します。

<!-- リンクの場合 -->
<a href="/detail.html" data-transition="some-transition">リンク</a>
 
<!-- エフェクトの場合 -->
<img
  data-webgl="some-effect"
  data-transition="another-transition"
  data-interactive
  data-click-1="/detail.html"
/>

このようにすると、detail.html ページに遷移する際にクリックする要素によって some-effect と another-transition のトランジションタイプで画面遷移のアニメーションが実行されるようになります。

2. デフォルトトランジションタイプの設定

デフォルトトランジションタイプはトランジションが設定されていない要素をクリックした際に適用されるトランジションタイプです。

config.transition.defaultType で設定することができます。

const { start } = setup({
  transition: { defaultType: "default-transition" },
});

基本的にはデフォルトトランジションタイプにサイト内で一番よく使うメインのトランジションタイプを設定し、トランジションタイプが２つ以上ある場合には 1 の方法で個別にトランジションタイプを設定するのがオススメです。

3. JS からトランジションタイプを設定

もし、JavaScript でトランジションタイプを設定したい場合は transition.changeType を使用してください。

この関数が返す値が最終的なトランジションタイプとなります。 その為、動的にトランジションタイプを切り替えることができます。

例えば、以下のリンクをクリックした際には some-transition のタイプでトランジションタイプが設定されますが、transition.changeType を使うことで異なる another-transition に変更しています。

<a href="/detail.html" data-transition="some-transition"></a>

transition.changeType((transitionType, state) => {
  console.log(transitionType);
  // > some-transition
  return "another-transition"; // another-transition にトランジションタイプを変更
});

詳細は transition.changeType をご覧ください。

以上がトランジションタイプを決定する方法です。
では次にトランジションのフックの実行方法について見ていきましょう。

トランジションのフックの実行

画面遷移時に実行したい処理はトランジション用のフックに対して行います。トランジション用のフックの利用も Hook オブジェクトを通して行います。トランジション用のフックは次の通りです。

トランジション用のフック

1. T_INIT（ページトランジションの初期化時）
2. T_BEGIN（ページトランジションの開始時）
3. T_NEXT_DOM_BEFORE（次のページの DOM が挿入される前）
4. T_BOTH_DOM_EXIST（次のページの DOM にアクセス可能な状態）
5. T_BOTH_OB_EXIST（次のページの Ob オブジェクトがアクセス可能な状態）
6. T_END（ページトランジション終了時）
7. T_ERROR（ページトランジションでエラーが出た時）

これらのフックに登録したコールバック関数が画面遷移時に実行されます。また、フックを登録する際はトランジションタイプ（type）を第三引数のオブジェクトに設定します。仮に type を省略した際は base というタイプが自動的に振られます。

例えば、T_BEGIN に対して次の関数を登録するとリンク、またはメッシュをクリックしたタイミングでログが出力されます。

hook.on(hook.T_BEGIN, () => console.log("base が実行されました。"), {
  type: "base",
  priority: -1, // フックオプションの priority を -1 に設定
});
 
hook.on(hook.T_BEGIN, () => console.log("some-transition が実行されました。"), {
  type: "some-transition",
  priority: 0, // フックオプションの priority を 0 に設定。（-1のフックよりも先に実行されます。）
});
 
hook.on(
  hook.T_BEGIN,
  () => console.log("another-transition が実行されました。"),
  { type: "another-transition", priority: 0 }
);

<a href="/detail.html" data-transition="some-transition">some-transition</a>
<a href="/detail.html" data-transition="another-transition"
  >another-transition</a
>

// それぞれ以下のログが表示されます。
 
// data-transition="some-transition" リンクをクリックした時
// > some-transition が実行されました。
// > base が実行されました。
 
// data-transition="another-transition" リンクをクリックした時
// > another-transition が実行されました。
// > base が実行されました。

some-transition、another-transitionどちらのリンクをクリックしても base が出力されます。 上記の例では T_BEGIN のフックに対して、コールバック関数を登録しましたが、他のトランジション用のフックでも登録の仕方は同じです。

各フックの特徴

各フックについての留意事項について紹介します。

hook.on(hook.T_BEGIN, (state) => {
  // 現在ページの情報を取得
  const { current } = state;
  // 現在ページに存在するエフェクトをループして、メッシュを非表示に変更
  current.os.forEach((ob) => (ob.mesh.visible = false));
 
  /* 画面上に表示されていたメッシュが非表示となります。 */
});

// 次のページの DOM が挿入される前に実行する関数を登録します。
// priority が大きいフックから実行されます。
hook.on(hook.T_NEXT_DOM_BEFORE, fixCurrentPage, { priority: 1000 });
hook.on(hook.T_NEXT_DOM_BEFORE, transparentNextHTML, { priority: 900 });
 
// 古いページを position: fixed にし、新しいページを重ねて表示できるようにする
async function fixCurrentPage({ current: { el } }) {
  const currentRect = el.getBoundingClientRect();
  el.style.top = currentRect.y + "px";
  el.style.width = `100%`;
  el.style.position = "fixed";
  el.style.left = 0;
}
 
// 次のページの.page-container要素を opacity: 0 とする
function transparentNextHTML({ next: { el } }) {
  // next.el: 次のページの.page-container要素
  el.style.opacity = 0;
}

hook.on(hook.T_BEGIN, keepOb, { type, priority: 100 });
function keepOb({ current }) {
  // 次のページでも保持し続けるObのセレクター
  const keepObs = [".ocean", ".sky"];
  keepObs.forEach((selector) => {
    const ob = world.getObByEl(selector);
    const idx = current.os.indexOf(ob);
    // current.osから除外
    current.os.splice(idx, 1);
  });
}

以上が transition の制御となります。 ダウンロード可能なサンプルコード内ではより実践的なコードを核にすることができます。 トランジションの制御を行っているファイルは transition-*.js というファイル名にしています。

実際に動かしながらコードを確認し、何かご質問がありましたらコミュニティで聞いてください。