CSS トランジションが開始されないか、コールバックが呼び出されません

問題の概要

HTML 要素の位置は、CSS トランジションを使用して更新されます。ただし、トランジションのトリガーに失敗するか、トランジションtransitionend イベント リスナーを追加したにもかかわらずコールバック関数が呼び出されません。この問題は、変更を setTimeout(1ms) でラップすることで解決できます。

解決策の説明

この動作の背後にある理由は、ブラウザーのレンダリング プロセスにあります。ブラウザーが CSS トランジションを適用するには、まず要素にインライン スタイルを適用する必要があります。要素がまだ DOM にない場合、その計算されたスタイル表示は "" に設定されます。

新しいスタイルが設定されるとき、ブラウザーはまだインライン スタイルを適用していません。したがって、要素の計算されたスタイルは "" のままで、その左と上の値は 0px のままです。

したがって、次のフレーム ペイントの前にトランジション プロパティが適用されると、左と上の値はすでに目的の値になっています。

この問題を解決するには、Element.offsetHeight getter または最新のスタイルを必要とする他の DOM メソッドを使用してリフローを強制できます。 。これにより、トランジションを適用する前にブラウザにスタイルの更新が強制され、スムーズな実装が保証されます。

例

次のコードは、問題とその回避策を示しています。

document.body.innerHTML  = tablehtml;

var animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) {
  animdiv.style.backgroundColor = 'red';
}, false);

// force a reflow
animdiv.offsetTop;

animdiv.style.backgroundColor = 'green';
Object.assign(animdiv.style, {
  left: "100px",
  top: "100px"
});

この例では、animdiv 要素の offsetTop ゲッターを使用して、位置が更新される前にリフローを強制します。これにより、CSS トランジションが適切にトリガーされ、コールバック関数が呼び出されることになります。