CSS トランジションが開始されない、またはコールバック関数がトリガーされないのはなぜですか? setTimeout を使用して修正するにはどうすればよいですか?

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

問題の概要

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

解決策の説明

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

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

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

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

例

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

<code class="html"><div id="spanky"
  style="position: absolute;
    left: 10px;
    top: 10px;
    background-color: blue;
    width: 20px;
    height: 20px;
    transition: left 1000ms linear 0s, top 1000ms linear 0s;">
</div></code>

<code class="js">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"
});</code>

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

以上がCSS トランジションが開始されない、またはコールバック関数がトリガーされないのはなぜですか? setTimeout を使用して修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。