・ページ読み込み時にtransitionが効いて動くんだけど、どうすればよい？
こんな疑問にお答えします。
transitionを使うことで、hoverした時などに色々なアニメーションを効かすことができますよね。
ただページ読み込み時に、なぜか発動してしまう時がある。。
これだと見た目上あまりよろしくない。。
読み込み時はtransiitonを無効にしたいよね
ということで、この記事では「ページ読み込み時にtransitionが動く対策」について解説していきます！
・ページ読み込み時にtransitionが動く
目次
【Google Chrome】ページ読み込み時にtransitionが動く
実はGoogle Chromeだと、ページ読み込み時にtransitionが動いてしまう仕様があるんだそう。
外部のCSSを読み込んでいると、「デフォルト⇒初期状態」となるらしいですよね。
そのため予期もしていないtransitionの動きが、読み込み時に反映しちゃう。。
とはいえ大丈夫です。
対策はあります！
【解決】ページ読み込み時にtransitionが動く【Google Chrome】
結論からいうと、下記コードを使えばページ読み込み時にtransitionが動くことを防ぐことができます。
<body class="preload">
<!-- ここにコンテンツが入ります -->
</body>.preload *{
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}$(window).on('load',function() {
$("body").removeClass("preload");
});ようはこういうこと↓
- bodyタグにクラスをつける
- CSSでそのクラスに対してtransition無効に
- ページ読み込みが終わったらそのクラスを消す
順に解説していきますね。
まずbodyタグにクラスをつけます。
<body class="preload">
<!-- ここにコンテンツが入ります -->
</body>今回は例として「preload」というクラス名をつけました。このクラスを使って、transitionの動きを操作していく感じになります。
次にCSSにて、transitionを無効にする記述をしていきます。
.preload *{
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}transition: noneとすることで、transitionプロパティを無効に。
そして「.preload *」とすることで、body内にある全ての要素に対して指定しています。
body内のコンテンツ全てのtransitionが無効に！
最後にJavaScriptにて、ページ読み込みが終わったら「.preload」クラスをbodyから消すという指定をしています。
$(window).on('load',function() {
$("body").removeClass("preload");
});これでページ読み込み終了後は、ちゃんとtransitionが効くようになりました。
ページ読み込み中⇒transitionを無効に
ページ読み込み後⇒transitionを有効に
これによりGoogle Chrome特有の、ページ読み込み時にtransitionが効いてしまう仕様を対策することができます！
【解決】ページ読み込み時にtransitionが動く【Google Chrome】：まとめ
- Google Chromeだと、ページ読み込み時にtransitionが動いてしまう
- HTML,CSS,JavaScriptを使いページ読み込み時にtransitionを無効にする
- そしてページ読み込みが終わった後は、通常通りtransitionを有効にする
ページ読み込み時のtransition対策として覚えておこう！
