ホームページ > ウェブフロントエンド > CSSチュートリアル > Google Chrome でのページ読み込み時に CSS トランジションがトリガーされないようにするにはどうすればよいですか?

Google Chrome でのページ読み込み時に CSS トランジションがトリガーされないようにするにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-01 13:59:02
オリジナル
1069 人が閲覧しました

How to Prevent CSS Transitions from Triggering on Page Load in Google Chrome?

ページの読み込み時に CSS トランジションがトリガーされないようにする

多くの Web 開発者は、ページの読み込み中に CSS トランジションがトリガーされ、要素が最終状態に達する前に点滅します。この動作は、要素が目的の色に遷移する前に最初に黒がちらつくため、色の遷移を適用する場合に特に顕著です。

この問題は、ページに を追加することです。ページフッターにタグを付けます。コード:

  <script> </script>
ログイン後にコピー

この回避策は、ページの他の部分に影響を与えることなく、ページの読み込み時にトランジションが発生するのを効果的に防ぎます。

あるいは、ホバー状態にトランジションを適用し、JavaScript を利用することもできます。ページの読み込み時にトランジションを手動でトリガーするには:

<code class="js">window.addEventListener("load", () => {
  const elements = document.querySelectorAll(".green");
  elements.forEach(element => element.classList.add("green-transition"));
});</code>
ログイン後にコピー

要約すると、Google Chrome でページの読み込み時に CSS トランジションが実行される原因となるバグは、空のスクリプト タグをフッターに追加するか、手動で開始することで軽減できます。 JavaScript による移行。

以上がGoogle Chrome でのページ読み込み時に CSS トランジションがトリガーされないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート