ページ読み込み時に動かないはずのCSS transitionが動いてしまう

| コメント(0)
CSSでtransitionを指定していると、スタイルが上書きされた際にアニメーションが発生します。
この処理はページ読み込み時点ですでに上書きされているスタイルに対しては適用されませんが、Google Chromeだと動いてしまう場合があります。

●対処法
外部CSS読み込み後に、何かしらのスクリプトを動作させる。

この問題は外部CSS読み込み後、DOM構築後までに何もスクリプトが実行されない場合に起きるそうです。
なので、

・JavaScriptを読み込んでいる場合は外部CSSよりも後に記述する

・見た目に影響のでないスクリプトを動かす
例)<script>console.log("");</script>

などの方法で回避することができます。

コメントする

このブログ記事について

このページは、gravity-worksが2020年11月25日 11:06に書いたブログ記事です。

ひとつ前のブログ記事は「position: fixed がブラウザ基準にならない」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。