web関連

bodyにフェードインアニメーションを設定すると開閉式のトグルが重くなる件

bodyにcssでフェードインアニメーションを仕込んだんだけど、開閉式メニューとかがもっさり動くようになってしまったのでjsで対応したときの話

cssでページ遷移のアニメーション

下記サイトを参考
CSS だけで Web ページのフェードイン表示を実装する方法

body {
    animation: bodyfadeIn 2s ease 0s 1 normal;
    -webkit-animation: bodyfadeIn 2s ease 0s 1 normal;
}

@keyframes bodyfadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes bodyfadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
これでやると、他のアニメーションにカクツキが出たりした
だから、jsで対応

jsでページ遷移のアニメーション

読み込まれる前にフェードアウトさせとく

bodyタグをを読み込んだ直後にコンテンツを隠すためのjavascriptコードを書く
すぐ後ろね

<body>
<script>
  document.body.style.opacity = "0";
</script>
bodyの後じゃないと無いよってエラーコードでるから注意

フェードイン用のコード

閉じbodyタグ前に書くコード
jQuery使ってる人用

<script>//jqueryパターン
jQuery(function($){
	$(function() {
		$('body').animate({'opacity' : '1'}, 1500);
	});
});
</script>
</body>
jQueryは一番最後に読み込んだりしてて最初のbodyを隠すコードにjQuery使えないんすよねー

下のコードはjavascript用のコード

<script>//javascriptパターン
var begin = new Date() - 0;
var myMain = document.body;
var myTime = 1500;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime) {
        clearInterval(id);
        current = myTime;
    }
    myMain.style.opacity = 1 * (current / myTime);
}, 10);
</script>
</body>

個人的にはjqueryのほうがコード的には楽
どういうコードになるのか備忘録がてら書き出し

参考
脱jQuery .animate() .stop()

全てのコンテンツが読み終わってからフェードさせたいので閉じのbodyタグ前に仕込む

まぁ、jsでclassつけたりしてcssで制御するのでもいいんだけど、css側をいじるのも面倒くさかったのでjsで制御した
たまに出るアニメーションの不具合は謎

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。