Pjax(Barba.js)でスムーズな画面遷移を実装する方法!5分で完了!サンプルあり!

この記事ではBarba.jsを導入してスムーズな画面遷移アニメーションを追加する方法をご説明します。Barba.jsの導入については前回の記事を御覧ください。
前の記事:Pjax(Barba.js)を導入してページ遷移を爆速にする方法→

この記事のゴール

以下のGIFアニメのような画面遷移の実装をこの記事のゴールとします。サンプルとデモは下記リンクからご確認ください。
サンプルコードはこちら→ デモはこちら→

Barba.jsを使った画面遷移アニメーション

Barba.jsの処理の流れ

前回の記事で紹介したとおり、Barba.jsでは画面遷移毎に.barba-containerで囲まれた部分(コンテナ)が更新されていくことになるため、Barba.jsでアニメーションを追加する前に、どのような流れでコンテナが更新されているのかを知る必要があります。大まかな流れとしては以下のようになります。

Barba.jsの処理シーケンス

  1. リンクが押されたタイミングでページ遷移先のコンテンツをAjaxで非同期で取得
  2. 取得後、遷移先ページのコンテナを現在のページ(遷移前ページ)のコンテナの後に追加
    ※この状態では前後2つのコンテナが同じページ内に存在する状態。
  3. 遷移元と遷移先のコンテナにアニメーションを追加してスムーズなページ遷移を実行
  4. アニメーション完了後、遷移前のコンテナを削除

2の状態では新旧のコンテナが2つ同時に存在することになります。具体的なHTMLとしては以下のようになります。

通常の状態(ページ遷移前、またはページ遷移後)

ページ遷移中の状態(2の状態)

※Old Containerがページ遷移前、New ContainerがAjaxで取得したページ遷移後のコンテナです。
では、具体的な実装を見ていきます。

HTMLの実装

最初に完成時のHTMLをご確認ください。

チェックポイント

  1. .barba-container部分がページ毎に読み込み直されます。
  2. ページ下部でjQueryを読み込んでいますが、これはアニメーションに必要なければ読み込む必要はありません。

Javascriptの実装

全体的なJSとしては以下の用になります。まずは全体のJSを御覧ください。

 

Javascriptの詳細説明

Barba.jsの初期化

まずBarba.jsを初期化します。

アニメーションの定義

FadeTransitionでアニメーションを定義しています。

Barba.BaseTransition.startプロパティーにアニメーション処理をセットします。this.fadeOut()が現在コンテナのフェイドアウト処理、this.fadeIn.bind(this)が遷移先コンテナのフェイドイン処理となります。fadeIn()fadeOut()の関数にアニメーションを実装することでユニークなアニメーションを定義する事ができます。

fadeOut()ではコンテナをposition: absoluteにすることで新旧のコンテナが重なる用にしています。

fadeIn()ではアニメーション前にvisibility: 'visible'を呼ぶ必要があります。これはBarba.jsでは新しいコンテナはvisibility: 'hidden'がスタイルに定義された状態でDOMに追加されるためです。addClass('fadein');は横からのスライドインのアニメーションを付与しています。また、最後に_this.done();を呼ぶことによって古いコンテナを削除しています。

先程定義したFadeTransitionをBarbaにトランジション関数として教えてあげます。
これでJS処理は完了です。

CSSアニメーションの定義

CSSにアニメーションを定義します。今回は新しいコンテナが横からスライドインしてくるようにしました。

以上でBarba.jsによるアニメーションの追加は完了です。

まとめ

今回はPjaxライブラリのBarba.jsを使って画面遷移アニメーションを作成しました。次の記事ではBarba.js実装時の注意点とその解決方法についてご説明します。

9 Things You should know before using Barba.js(Pjax)

最新記事