追加された要素の CSS トランジションがすぐに機能しないのはなぜですか?

追加された要素の即時 CSS トランジション

最近、追加された要素の即時 CSS トランジションが無視されるようであることが指摘されました。終了状態がすぐに表示されます。この動作とその解決策を詳しく調べるために、次のことを調べます。

原因

この問題の根本原因は、リフロー バッチと呼ばれるブラウザ最適化手法です。 1 つの JavaScript サイクルで要素が追加または変更されると、ブラウザーは、すべての変更が行われた後に必要なリフロー (レイアウトと位置の再計算) を 1 つのバッチで実行することを選択する場合があります。この最適化により、ページの不必要な再描画が複数回行われることがなくなります。

回避策

いくつかのメソッドが効果的に遷移をトリガーします。

• setTimeout : クラスの追加を後続の JavaScript サイクルに遅らせると、ブラウザーは 2 つの異なるスタイル値を計算することになり、スムーズな移行が実現します。
• offsetWidth に直接アクセスする: このプロパティはリフローを強制します。
• 要素にフォーカスします: offsetWidth にアクセスするのと同様に、要素にフォーカスするとリフローがトリガーされ、遷移が開始されます。

推奨ソリューション

推奨ソリューションは、特定のシナリオによって異なります。ただし、信頼性を確保するために、通常は offsetWidth (または getComputedStyle()) にアクセスすることをお勧めします。これにより、ブラウザが遷移前にスタイル値を計算するようになり、スキップによる予期せぬ動作の可能性が減ります。

追加オプション

代替ソリューションには次のものがあります。

• requestAnimationFrame の使用: この API を使用すると、次のアニメーション フレームで実行されるアニメーション コールバックをスケジュールでき、ブラウザーがリフロー バッチ処理を完了した後に遷移がトリガーされるようになります。 .
• レイアウトの再計算を強制する: document.documentElement.style.position = null; を呼び出します。続いて document.body.style.position = null;ブラウザにレイアウトの再計算を強制し、トランジションをトリガーします。

根本的な原因を理解し、利用可能な回避策を検討することで、動的に追加された要素で CSS トランジションを効果的にトリガーでき、スムーズでシームレスなアニメーションを確実に実行できます。 Web アプリケーション。

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