サイト表示時にTransitionでホバーアニメーションが実行されてしまう場合の対処法
transitionプロパティを使用してサイト上のアニメーションを作成していると、たまにGoogle Chromeで画面読み込み時に意図せずアニメーションが発生してしまう時があります。
発生した症状
読み込み時にtransitionでアニメーションしながら、最終的に目的の形になっていきます。
非常に気になるので、解決策を探してみたところこちらの記事にたどり着きました。
transitionをnoneにするclassを<body>タグへ付けておいて、読み込みが完了したらそのclassを外す。という方法です。
解決方法（jQuery）
コードは参考記事のままになってしまいますが、jQueryを使っている（使える）状態であれば下記のコードで解決されます。
HTML<body class="preload">CSS.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}jQuery$(window).load(function() {
$("body").removeClass("preload");
});解決方法（JavaScript）
まっさらなJavaScriptで解決したい場合は下記のコードで解決します（HTMLとCSSは上記のjQueryと全く同じ）。
JavaScriptwindow.onload = function(){
const preload = document.getElementsByClassName('preload');
preload[0].classList.remove('preload');
}transitionを使用するサイトでは、とりあえずこのコードを付けておきたいですね。
