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

Mary-Kate Olsen
リリース: 2024-10-31 08:48:29
オリジナル
780 人が閲覧しました

Why Does My CSS Transition Skip and the Callback Fail to Fire?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!