CSS トランジションが時々スキップされたり、コールバックのトリガーに失敗したりするのはなぜですか?

CSS トランジションがスキップされた、またはコールバックが呼び出されない: 原因を理解する

CSS では、トランジションは、時間の経過に伴うプロパティの変化をスムーズにアニメーション化するエレガントな方法を提供します。ただし、トランジションの実行に失敗したり、関連するコールバックが呼び出されないままになる特定の状況が発生する可能性があります。

そのようなシナリオの 1 つは、ゲーム開発中に発射要素に新しい位置値を割り当てるときに発生します。 jQuery 呼び出しを純粋な JS に置き換えたにもかかわらず、トランジションは完全にスキップされたように見え、コールバックはトリガーされませんでした。

失われたトランジションの謎

奇妙なことに、ラッピング1 ミリ秒の setTimeout 以内に CSS の位​​置を変更すると、問題はなんとか解決されましたが、それでもトランジションがバイパスされることがありました。この矛盾により、なぜ setTimeout が役に立ったのか、またなぜコールバックが失敗することがあるのか​​という疑問が生じました。

計算されたスタイルの役割

この動作を理解する鍵は次のとおりです。 CSS で計算されたスタイルで。 JavaScript を介して新しいスタイルを設定すると、ブラウザーはそれらをすぐに適用しない場合があります。代わりに、要素の計算されたスタイルは変更されず、インライン スタイルと計算された値の間に不一致が生じます。

発射要素の場合、インライン スタイルでは左と上の値が指定されていましたが、計算された値はスタイルは最初、デフォルト値の 0px を保持していました。

トランジションへの影響

トランジションは、計算されたスタイルに依存してアニメーションの開始状態と終了状態を決定します。最初に計算されたスタイルがトランジション元のインライン スタイルと異なる場合、トランジションは基本的に何の効果もなく、スキップしているように見えます。

解決策: リフローの強制

この問題を解決し、トランジションが常に正しく実行されるようにするには、計算されたスタイルを再計算するリフローをブラウザに強制的に実行させる必要があります。

これを実現する 1 つの方法は、次のプロパティを必要とするプロパティにアクセスすることです。 offsetHeight などの最新のスタイル。提供されたコードでは、新しい左と上の値が割り当てられる前に、animdiv.offsetHeight によってリフローがトリガーされます。

結論

計算されたスタイルの問題を理解することで、次のことが可能になります。 CSS トランジションが期待どおりに動作し、コールバックが確実に呼び出されることを確認します。異常な動作が観察された場合は、要素を移行する前に必ずリフローを強制してください。

以上がCSS トランジションが時々スキップされたり、コールバックのトリガーに失敗したりするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。