CSS トランジションがインライン スタイルで機能しないのはなぜですか?それを修正するにはどうすればよいですか?

CSS 遷移が開始されないか、コールバックが呼び出されない

問題:

JavaScript ベースのゲーム プロジェクトでは、飛び道具の動きについて jQuery アニメーションを CSS トランジションに置き換えようとしましたが、失敗に終わりました。 setTimeout 遅延を適用しても、トランジションがスキップされたり、コールバックがトリガーされませんでした。

説明:

この動作は、ブラウザーが適用されていないために発生します。トランジション プロパティを適用する前のインライン CSS スタイル。新しいスタイルが設定されても、要素の計算されたスタイルには、表示位置、左位置、上位置のデフォルト値が残ります。

左と上の値は 0px (デフォルト値) のままであるため、トランジションは何も行いません。値は新しいスタイルで設定された値と一致するためです。これを修正するには、トランジションを適用する前に、ブラウザのリフローで強制的にスタイルを更新する必要があります。

解決策:

ブラウザのリフローを強制するには、Element.offsetHeight を利用します。ゲッター。例:

<code class="js">// Assume animdiv is the element you want the transition to work on
animdiv.offsetTop;
// Now animdiv has all inline styles set

Object.assign(animdiv.style, {
  left: "100px",
  top: "100px"
});</code>

このステップにより、要素の計算されたスタイルが最新であることが保証され、トランジションが期待どおりに適用されます。

以上がCSS トランジションがインライン スタイルで機能しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。