CSSでtransitionを指定していると、スタイルが上書きされた際にアニメーションが発生します。
この処理はページ読み込み時点ですでに上書きされているスタイルに対しては適用されませんが、Google Chromeだと動いてしまう場合があります。
●対処法
外部CSS読み込み後に、何かしらのスクリプトを動作させる。
この問題は外部CSS読み込み後、DOM構築後までに何もスクリプトが実行されない場合に起きるそうです。
なので、
・JavaScriptを読み込んでいる場合は外部CSSよりも後に記述する
・見た目に影響のでないスクリプトを動かす
例）<script>console.log("");</script>
などの方法で回避することができます。
コメントする