IE、chromeで起きた！！画面の読み込み時にtransitionが動作するバグの解決方法！！

2017年3月8日

css3のプロパティで、アニメーションで使ったり、JQueryを使わずhover時にふわっとさせたりと、何かと便利なtransitionプロパティですが、画面の読み込み中に実行されてバグが起きて困ったことがあったので、解決方法を下記に残しておきます。

ちなみに、僕の方で起きたバグとしては画面読み込み時にtransitionが実行されることで高さを揃えるjs（matchHeight）の実行タイミングがズレて高さが揃わないjsになってしまった、、、
ということです。

では下記にソースコードを書いていきます。

スポンサードサーチ

html

<body class="preload">

1	<body class="preload">

css

.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

.preload * {

-webkit-transition: none !important;

-moz-transition: none !important;

-ms-transition: none !important;

-o-transition: none !important;

transition: none !important;

}

スポンサードサーチ

jQuery

$(window).on('load' , function() {
$("body").removeClass("preload");
});

$(window).on('load' , function() {

$("body").removeClass("preload");

});

bodyにpreloadというclassをつけて、
css側でtransition: none !important;を指定することで、初期設定としてbodyの中の全要素のtransitionプロパティをnoneにして無効にするという設定をします。

そして、jQueryでページを読み込んだ後に、preloadのclassを削除という指定をします。
上記をまとめると、ページ読み込み時にはtransitionを無効にして、読み込んだ後にtransitionを実行するということになります。
これによってページ読み込み時にtransitionが実行されて起こるバグが解消されるはずです。

※preloadの意味
～に前もって負荷を加える、～をあらかじめ組み込む

参考サイト：
http://14-00.com/archives/31