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

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

CSS トランジションを使用して非表示要素のプロパティをアニメーション化しようとすると、次のような問題が発生する可能性があります。要素が最終位置に即座に表示される問題。これは、CSS オブジェクト モデル (CSSOM) とドキュメント オブジェクト モデル (DOM) の関係によるものです。

リフローと CSSOM の役割

CSS トランジションが決定します要素の計算されたスタイルに基づく初期状態。ただし、要素に display: none がある場合、要素は実質的に CSSOM には見えないため、ブラウザは計算されたスタイルを無視します。

シナリオでは、.b でトランジションをトリガーすると、計算されたスタイルはありません。 、隠れているので。そのため、トランジションを適切に初期化できません。

リフローの強制

この問題を解決するには、開始する前に非表示要素の計算されたスタイルをブラウザに強制的に更新させることができます。移行期。これは、リフローをトリガーすることによって行われます。

リフローは、ブラウザーがページ全体のレイアウトと計算されたスタイルを再計算するプロセスです。これは、特定の DOM メソッドによって、または画面が更新されるときなど、必要に応じてブラウザ自体によってトリガーできます。

requestAnimationFrame() API を使用すると、次のペイントの直前にリフローを実行するようにブラウザにリクエストできます。という操作が発生します。これにより、トランジションの開始時に要素の計算されたスタイルが最新であることが保証されます。

更新されたコード

$('button').on('click', function () {
  $('.b').show(); // Apply display:block synchronously

  requestAnimationFrame(() => {
    // Force a reflow
    document.body.offsetHeight;

    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
})

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