サイトを開いた時、ページ読み込み時に一瞬表示が崩れたり、アニメーションがチラつくことありませんか？
「一瞬だから別に良くね？」
と思ったらダメです。
画面遷移時・ページ読み込み時に一瞬表示が崩れる理由
以下の理由から一瞬表示が崩れるorチラつく場合があります。
- CSSとJavascriptの読み込みにちょっと時差がある
-
transform,animation,transitionを組み合わせいる場合 -
position: fixedを指定している場合に、displayで表示・非表示を切り替えていて、子孫要素にtransitionを使っている場合
私の場合は、ヘッダーとかで画面遷移時に一瞬だけアニメーションがチラつくことがよくありました。
画面遷移時・ページ読み込み時に一瞬表示が崩れるのを防ぐ方法
解決方法としては、一瞬表示が崩れる要素をCSSで非表示にしておいて、jQueryでフェードインさせます。
※jQueryの読み込みなどは省略
#header {
display: none;
}
$(function() {
$('#header').fadeIn(0);
});
これで、画面遷移時・ページ読み込み時に一瞬表示が崩れるのを防ぐことができます。