忘年会のために作った昔のテレビみたいに画面遷移するJavaScript

僭越ながら、エヌシーアイ総合システム Advent Calendar 2019 20日目を担当させていただきます。
（投稿が1月中旬になってしまった…）
忘年会のために作ったJavaScriptについて書きます。
ちなみに全体が完成したのは忘年会前日深夜3時でした。

どんな感じで画面遷移するの？

こんな感じで動きます。
遷移前と遷移後で同じページのように見えますが、別のページに飛んでいます
今や見る影もないブラウン管テレビってこんな感じだった気がします。

大まかな中身としては
　フェードアウトのアニメーション
　ページ移動
　フェードインのアニメーション
の流れになります。

フェードインのアニメーション

順番が逆になりますが、まずフェードインからです。
こちらはCSSだけで作りました。

style.css

body {
	animation: animate_in 1s ease;
}

@keyframes animate_in{
	0%{
		transform: scale(0.2, 0.01);
		opacity: 0;
	}
	70%{
		transform: scale(1, 0.01);
		opacity: 1;
	}
	100%{
		transform: scale(1, 1);
	}
}

@keyframes を使って動きを処理しています。
画面サイズと透明度を変えてそれっぽく見せています

フェードアウトのアニメーション

こちらが本題です。
リンクが押されるとアニメーションが起動するようにJavaScriptを書きます。
またアニメーション終了までページ移動を止める必要があります。

style.css

.animate_content{
	animation: animate_out 1s ease;
}

@keyframes animate_out{
	30%{
		transform: scale(1, 0.01);
	}
	70%{
		transform: scale(0.2, 0.01);
		opacity: 1;
	}
	100%{
		transform: scale(0.2, 0.01);
		opacity: 0;
	}
}

page_transition.js

$(function() {
    $('a:not([href^="#"]):not([target])').on('click', function(e) {

        // ページ移動を止めてURLを取得
        e.preventDefault();
        url = $(this).attr('href');

        // クラスを追加
        $('body').addClass('animate_content');

        // 980ms経ったらページ移動
        setTimeout(function(){
            window.location = url;
        }, 980);

        return false;
    });
});

アニメーションの1s(1000ms)が終わるまでにページ移動しないといけないので、980msで移動させています。
追加するクラス / 追加される属性 を簡単に指定できるので応用は効きそうな気がしますね。

終わりに

学生時代はJavaScriptを避けてきたので勉強しないとですね。