[JS]ページ遷移を遅延させて任意のクラスを付与する実装

July 25, 2017Code

ページ遷移時の魅せ方を考える際に、読み込み前にちょっとしたアニメーションを差し込みたいって場合がありますよね。読み込み後のローディング画面とうまく連動させることでページ遷移時のあのなんとも言えない間にユーザーへの普段を下げさせたいというインタラクティブな考えです。UXという考えでもユーザーが導線過程で離れる要素を作るのか、この先どうなるのかな?と期待感を持たせるのか。この辺りの話になってくるので、何気に重宝する実装です。

前提はさておき、今回実装サンプルでは、aタグのURLを取得し、遷移挙動を一時キャンセル。ワンクッション挟んでからURLを読み込ませるという実装です。


$(function() {
  //'#'から始まるhrefを持つaタグ、target属性を持つaタグを除く
  $('a:not([href^="#"]):not([target])').on('click', function(e){
    //クリック時の挙動を停止
    e.preventDefault(); 
    //href属性の属性情報を取得
    url = $(this).attr('href');
    if (url !== '') {
      //bodyタグへ任意のクラスを追加
      $('body').addClass('class_name');
      //setTimeOutを用いて500s後にurl遷移を実行
      setTimeout(function(){
        window.location = url;
      }, 500);
    }
    return false;
  });
});

上記では、<a href="#section"></a><a href="http://sample.com" target="_blank"></a>といったページ内アンカーリンクを持った要素、そして別ページへの遷移を持つものを除くという指示をしております。
これは、ローディング時のアニメーションを想定した場合の設計になっているので必要に応じて変更しても問題ないと思います。

使い方としては、bodyに任意のクラスが追加された際に発火するアニメーションを実装しておき、URL遷移前に発火、次ページ読み込み時にこれらを解除するというのが一般的かと思います。フェードアウト/フェードインなどを入れるのが使いやすい例ですが、data-属性を使ったテキストの引き出しや、coverコンテンツを使った動きのある表現などやれることは多そうです。

ベースとなる考え方は、『遷移を止める・アニメーションの実行(ID/Classの付与)・遷移の実行』なので、この辺り、しっかりと覚えておきましょう。