最初に非表示になっている要素では CSS トランジションが機能しないのはなぜですか?

初期非表示の要素で CSS トランジションが機能しない

CSS の表示を使用して要素が最初に非表示になっている場合: なし、CSS トランジションが適用されます可視性が変更されてもトリガーされません。これは、CSS トランジションが要素の初期計算スタイルに依存しており、非表示要素の場合は空になるためです。

CSSOM と DOM の比較

この動作を理解するには、次のようにします。 CSS オブジェクト モデル (CSSOM) とドキュメント オブジェクト モデル (DOM) を区別することが重要です。 DOM は HTML ドキュメントの階層構造を表し、CSSOM には各要素の計算されたスタイルが含まれます。

リフローとペイント

要素の可視性が変更された場合、ブラウザーは CSSOM を更新し、ページをリフローして変更を反映する必要があります。リフローは、CSS ルールに基づいて要素の計算されたスタイルと位置を再計算します。ペイントは、画面上にページをレンダリングするプロセスであり、リフロー後に発生します。

トランジションの開始

CSS トランジションは、要素の最初に計算されたスタイルとその要素の間を補間することによって機能します。最終的なスタイル。要素が最初に非表示になっている場合、その計算されたスタイルは空になるため、遷移アルゴリズムは初期状態を作成できません。

解決策: 強制リフロー

遷移をトリガーするには非表示の要素では、可視性を変更した後にリフローを強制する必要があります。これは、ブラウザがページを描画する直前にコールバックを実行する requestAnimationFrame API を使用して実現できます。

requestAnimationFrame を使用すると、ブラウザが CSSOM を更新した後に CSS トランジションを適用でき、トランジションが可能になります。

例

これは、の修正バージョンです。 requestAnimationFrame を使用してリフローを強制するコード:

$('button').on('click', function() {
  $('.b').show();

  requestAnimationFrame(() => {
    document.body.offsetHeight; // Force a reflow
    $('.b').css('right', '80%');  // Trigger the transition
    $('.a').css('right', '80%');
  });
});

結論として、CSSOM には初期に計算されたスタイルが含まれていないため、CSS トランジションは最初は非表示の要素では機能しません。遷移をトリガーするには、要素の可視性を変更した後にリフローを強制する必要があります。

以上が最初に非表示になっている要素では CSS トランジションが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。