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

非表示要素に対して CSS トランジションがトリガーされない

Web 開発では、CSS トランジションを使用して要素のプロパティへの変更をアニメーション化するのが一般的です。ただし、よくある障害は、要素が最初は非表示 (例: display: none) で、その後表示されるようになったものの、CSS トランジションがアクティブにならない場合です。

CSSOM とその舞台裏DOM

この動作を理解するには、CSS オブジェクト モデル (CSSOM) とドキュメントの関係を考慮する必要があります。オブジェクト モデル (DOM)。 DOM はページの HTML 構造を表し、CSSOM は各要素の計算されたスタイルを表します。

レンダリング プロセス中に、DOM 操作 (表示プロパティの変更など) が最初に行われます。次に、ブラウザーは、リフローまたはレイアウトと呼ばれる、ページ上のすべての要素の計算スタイル (CSSOM) を再計算します。最後に、変更は画面上に視覚的にレンダリングされます (ペイント)。

CSS トランジションへの影響

CSS トランジションでは、開始を計算するために要素の初期計算スタイルが必要です。州。ただし、非表示要素の場合、計算されたスタイルは表示されないため、基本的に null になります。これは、遷移がトリガーされると、遷移可能な値に対して初期状態が無効になることを意味します。

解決策

この問題を解決するには、次のいずれかを使用できます。アプローチ:

• リフローの強制: requestAnimationFrame またはリフローをトリガーする他のメソッドは、ブラウザーに計算されたスタイルの再計算を強制します。トランジションがトリガーされる直前にリフローを呼び出すことで、計算されたスタイルが最新であることが保証されます。
• $.animate()**: .animate() を内部的に使用します。 DOM 操作をトリガーし、遷移をトリガーするコールバックをスケジュールすることでリフローを強制します。ただし、このアプローチは通常、直接リフロー方法を使用するよりも遅くなります。

例

次のコード スニペットは、requestAnimationFrame を使用してリフローを強制する方法を示しています。

$('button').on('click', function() {
  $('.b').show(); // Show the hidden element

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

requestAnimationFrame を使用することで、CSS トランジションが正常にトリガーされることを保証します。最初は非表示の要素。

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