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でページ遷移のアニメーション
読み込まれる前にフェードアウトさせとく
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のほうがコード的には楽
どういうコードになるのか備忘録がてら書き出し
全てのコンテンツが読み終わってからフェードさせたいので閉じのbodyタグ前に仕込む
まぁ、jsでclassつけたりしてcssで制御するのでもいいんだけど、css側をいじるのも面倒くさかったのでjsで制御した
たまに出るアニメーションの不具合は謎
だから、jsで対応