CSS トランジションがスキップされ、コールバックが起動できないのはなぜですか?

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

問題は、CSS トランジションとブラウザーの癖に起因しています。レンダリングプロセス。最初に、CSS 位置値を使用して HTML をインライン化し、左側と上部のプロパティにトランジションを設定します。新しい位置値を追加すると、遷移が期待されましたが、コールバックがトリガーされずにスキップされました。

興味深いことに、スタイルの変更をラップする 1 ミリ秒の setTimeout を追加すると、遷移が開始されました。ただし、コールバックが起動されない場合がありました。この動作はブラウザのタイミングに起因する可能性があります。

説明:

新しいスタイルが設定されたとき、ブラウザはまだインライン スタイルを計算されたスタイルに適用していません。 。要素の計算されたスタイルは、left プロパティと top プロパティに対して未設定のままで、デフォルトは 0px です。後で適用されるトランジションは設定値と一致するだけで、トランジションは発生しません。

これを解決するには、リフローでスタイルを強制的に更新する必要があります。これは、offsetHeight ゲッターまたはリフローをトリガーする他の同様のメソッドを使用して実行できます。

offsetHeight の使用例:

<code class="javascript">let tablehtml = `
<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>`;

document.body.innerHTML += tablehtml;

let animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) { 
  animdiv.style.backgroundColor='red';
}, false);
// force a reflow
animdiv.offsetTop;
// now animdiv will have all the inline styles set
// it will even have a proper display

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

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