サイト表示時にTransitionでホバーアニメーションが実行されてしまう場合の対処法

transitionプロパティを使用してサイト上のアニメーションを作成していると、たまにGoogle Chromeで画面読み込み時に意図せずアニメーションが発生してしまう時があります。

発生した症状

読み込み時にtransitionでアニメーションしながら、最終的に目的の形になっていきます。
非常に気になるので、解決策を探してみたところこちらの記事にたどり着きました。

14-00.com

transitionによるCSSアニメーションがChromeでページ読み込み時に動作してしまう問...

http://14-00.com/archives/31

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を使用するサイトでは、とりあえずこのコードを付けておきたいですね。

WebDesigner's Memorandumウェブデザイナーの備忘録

サイト表示時にTransitionでホバーアニメーションが実行されてしまう場合の対処法

発生した症状

解決方法（jQuery）

解決方法（JavaScript）

著者について

サイトウマサカズ@31mskz10

記事一覧

目次

WebDesigner's Memorandumウェブデザイナーの備忘録

発生した症状

解決方法（jQuery）

解決方法（JavaScript）

著者について

サイトウ マサカズ@31mskz10

記事一覧

目次

表示設定

ダークモード

サイトウマサカズ@31mskz10