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

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

問題の理解

説明されているシナリオには 2 つの div がありますそのうちの 1 つは、最初は display:none を使用して非表示になります。 show() や toggle() などのメソッドを使用して非表示の div を表示すると、そのプロパティの遷移がスムーズに行われません。代わりに、div は目的の終了位置に即座に表示されます。

動作の原因

この動作を理解するには、CSSOM ( CSS オブジェクト モデル) と DOM (ドキュメント オブジェクト モデル)。

CSS 遷移は要素の認識に依存します。トランジションの開始点を決定するために計算された初期スタイル値。ただし、display:none を持つ要素は、CSSOM で表示されるとみなされないため、計算されたスタイル値を持ちません。

リフローの影響

リフローは、再計算するブラウザー操作です。 DOM またはスタイル ルールへの変更に基づいたドキュメントのレイアウト。 display:none が削除されると、ブラウザはリフローを開始して DOM と計算されたスタイル値を更新します。

指定されたシナリオでは、リフローが発生する前に遷移が開始されると、非表示の div の最初の計算されたスタイル値がは無効になり、突然表示されます。

問題

オプション 1: $.animate()

$.animate() を使用すると、アニメーションを実行する前にリフローがトリガーされ、計算されたスタイル値が確実に

オプション 2: 手動で強制的にReflow

requestAnimationFrame() を使用すると、次のペイント操作の前にコードの実行をスケジュールできます。コールバック内では、document.body.offsetHeight のようなメソッドを使用してリフローを強制し、必要な CSS プロパティ値を設定することですぐにトランジションをトリガーできます。

結論

CSS 遷移中に最初は非表示だった要素が突然表示されるのは、計算された有効なスタイル値が欠如しているためです。リフロー プロセスを理解し、リフローを強制するテクニックを使用することで、最初は非表示になっていた要素のスムーズな移行を保証できます。

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