ゲームで CSS トランジションがスキップされたり、コールバックが省略されたりするのはなぜですか?

CSS トランジションがスキップされた、またはコールバックが省略されました

この多面的な調査の中で、開発者は、ゲーム プロジェクト内の CSS トランジションとコールバック呼び出しにおける断続的な不一致に対する困惑を表明しています。 jQuery を純粋な JavaScript に置き換えたにもかかわらず、CSS を使用して発射体の位置を移行しようとすると予想どおりに機能せず、移行を開始するには 1 ミリ秒のタイムアウトが必要でした。さらに、トランジション コールバックは時々実行に失敗し、開発者を当惑させました。

この問題の複雑さを詳しく調べるには、CSS トランジションが要素の計算されたスタイルの変更に依存していることを認識する必要があります。この場合のように、インライン スタイルが設定されている場合、ブラウザーは計算されたスタイルをすぐに更新しない可能性があり、その結果、予想される要素プロパティと実際の要素プロパティの間に不一致が発生します。

transition プロパティが適用されると、計算された左と上の値がすでに意図した値と一致している可能性があり、実行するアクションが何もないまま遷移が残されます。したがって、これはスキップされ、transitionend イベントはトリガーされません。

これを修正するには、開発者は、要素の offsetHeight にアクセスするか、DOM メソッドを使用してリフローをトリガーするなど、スタイルの再計算を強制する手法を使用できます。例:

<code class="javascript">let animdiv = document.getElementById('animid');
animdiv.addEventListener("transitionend", function(event) { ... }, false);
// force a reflow
animdiv.offsetTop;
Object.assign(animdiv.style, {left: "100px", top: "100px" });</code>

スタイルの再計算を強制することで、計算されたスタイルが最新になり、トランジションが要素の位置の変更を正確に追跡し、transitionend イベントを正しく起動できるようになります。

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