最初に非表示にしたときに要素の遷移が失敗するのはなぜですか?

最初に非表示にすると要素の遷移が失敗する

シナリオの概要

「」というラベルが付いた 2 つの要素を考えます。 A' と 'B'。ここで、'B' は最初は、display: none を使用して非表示になります。 $.show() や $.toggle() などのメソッドで「B」を表示するときにトランジションを使用してアニメーション化すると、要素はアニメーションなしで即座に最終位置に表示されます。

説明

根本的な原因は、ドキュメント オブジェクト モデル (DOM) と CSS オブジェクト モデル (CSSOM) の関係にあります。 CSS トランジションは、要素の最後に計算された値に依存します。最初に非表示になっている要素の場合、計算値は display: none となり、基本的に CSSOM から要素が削除されます。

DOM 操作とリフロー

DOM 操作フェーズには更新が含まれます非同期プロセスである JavaScript オブジェクト。対照的に、CSS ルールを更新し、計算されたスタイルを再計算するリフロー フェーズは、必要な場合にのみ発生します。最初に非表示の要素には計算されたスタイルがないため、DOM 操作中にリフローがトリガーされません。

遷移初期状態

その結果、' の遷移時にB' が開始しますが、リフローがまだ発生していないため、初期状態は定義されていません。これにより、トランジションが正しく行われない可能性があります。

リフローの強制

この問題を解決するには、トランジションをトリガーする前にリフローを強制します。これは、Element.getBoundingClientRect() または element.offsetHeight を使用して実現できます。これらには、最新の計算値が必要なため、リフローが強制されます。

強制リフローを使用した改善例

これは、遷移をアニメーション化する前にリフローを強制する、修正されたコード スニペットです:

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

  requestAnimationFrame(() => { // wait just before the next paint
    document.body.offsetHeight; // force a reflow
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

遷移がトリガーされる前にリフローを強制することで、計算された値が最新であることが保証されます。これにより、トランジションが正しく機能するようになります。

以上が最初に非表示にしたときに要素の遷移が失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。