【CSS】ページ読み込み時にtransitionさせない

ネコニウム研究所

PCを利用したモノづくりに関連する情報を掲載するブログ

【CSS】ページ読み込み時にtransitionさせない

2022-3-28 | , , ,

ページ読み込み時に意図しないCSSのtransitionを発生させたくない!

概要

この記事では、ページ読み込み時にCSSのtransitionさせない手順について掲載する。

CCSでtransitionを使ってるとページ読み込み時に意図しないアニメーションが発生することがあって(発生しないこともあるのが更に)なんだがカッコ悪い。気になる。眠れない。
どうやらChromeのみで発生するらしいとのちまたの噂。

仕様書

環境

  • Google Chrome 99.0.4844.74(Official Build)(64 ビット)

手順書

まず、tansitionを強制的に無効にする下記のようなクラスを作る。

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

htmlやphpのbodyタグに先程作ったクラスを設定する。

<body class="preload">

ページが読み込まれ描写が完了したら、ansitionを強制的に無効にしてたクラスをJavaScriptやTypeScriptでbodyタグから削除する。

window.onload = function() {
    document.body.classList.remove("preload");
}

TypeScriptの場合は下記のような感じ。

window.onload = (e) => {
    document.body.classList.remove("preload");
};

まとめ(感想文)

ページ読み込み時の意図しないtransitionのせいで眠れなくなってた人は、今夜から爆睡できるようになるかもね!

眠れないとまでは言わないけど、結構気になってたぞ!!