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

ページの読み込み時に 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 サイトの他の関連記事を参照してください。