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

ページ読み込み時に意図しない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のせいで眠れなくなってた人は、今夜から爆睡できるようになるかもね！

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