解 説
ページを遷移するときに、フェードアウト・インのアニメーションをかける方法はいくつかあり、Githubに公開されているjQueryライブラリや、WordPressのプラグインなどもありますが、ここではプラグインなどを使わず、軽量なjavascriptコードで実装する方法をご紹介します。
1最初にフェードアウト・インのエフェクトの仕組みを説明します。
3CSSのスタイリングはこのようにします。
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#fff; /* 背景カラー */
z-index: 9999; /* 一番手前に */
pointer-events: none; /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
opacity: 0; /* 初期値では非表示 */
-webkit-transition: opacity .8s ease; /* アニメーション時間は 0.8秒 */
-ms- transition: opacity .8s ease;
-moz- transition: opacity .8s ease;
transition: opacity .8s ease;
}
/*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを１に設定します。*/
body.fadeout::after {
opacity: 1;
}
/*お好みで、.fadeoutセレクタ以下の他の要素にもアニメーション用のCSSを定義します*/
/*DEMOではページ遷移時にarticle要素のスケールもアニメーションさせています*/
body.fadeout article{
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
bodyの::after擬似クラスを、最上層レイヤーにして、背景は白、サイズは全画面表示にしています。
初期値では、opacity は０（この上層レイヤーは非表示 ＝ ページコンテンツが表示される）として、
.fadeoutクラスが付与された場合は、opacityは１（上層レイヤーは100％表示 ＝ ページコンテンツが消える）
と設定します。
4あとは以下のように javascriptを書けば完了です。（jQueryは読み込んでおきましょう）
/*設定１*/
$(window).on('load', function(){
$('body').removeClass('fadeout');
});
/*設定２*/
$(function() {
// ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
$('a:not([href^="#"]):not([target])').on('click', function(e){
e.preventDefault(); // ナビゲートをキャンセル
url = $(this).attr('href'); // 遷移先のURLを取得
if (url !== '') {
$('body').addClass('fadeout'); // bodyに class="fadeout"を挿入
setTimeout(function(){
window.location = url; // 0.8秒後に取得したURLに遷移
}, 800);
}
return false;
});
});
※jQueryは読み込んでおきましょう。
＜ javascriptの説明 ＞
/*設定１*/
ページ表示した瞬間には、非表示にしたいので、body要素から.fadeoutクラスを取り除きます。
/*設定２*/
そして、ページ内のアンカータグがクリックされたら、それを検知してページナビゲート動作を一旦キャンセルし、
body要素に再び.fadeoutセレクタを追加してページ全体をフェードアウトさせてから（アニメーションの時間経過後）、
クリックされたアンカータグのhref属性に指定されたURLに遷移します。
以上で設定完了です。
＜ポイント＞
アンカータグのクリック検出は、a:not([href^="#"]):not([target]) として
ハッシュリンク(#)とtarget=”_blank”などとして新しいウィンドウでURLを参照する場合は除外することと、
setTimeoutで待機する時間は、CSSのtransitionで指定したアニメーション時間と同じにしておくことです。
まずは、demoサンプルがどのように動いているのか？その仕組みについて説明します。
body要素に::after疑似セレクタを作り、CSSでページ全体を「白」で覆う一番上層のレイヤーに指定します。
ページが表示されたときはこのレイヤーの透明度を「100%」から「0%」にアニメーションさせ（フェードイン）、
アンカー(a)タグをクリックしてページ遷移するときには、
レイヤーの透明度を再び「0%」から「100%」にアニメーション（フェードアウト）させて、その直後に遷移させる、
という動作を設定していきます。