JavaScript で CSS トランジションを確実に無効にするにはどうすればよいですか?

CSS トランジションの課題を克服する

Web 開発の領域では、CSS トランジション効果を一時的に無効にすることが課題となる場合があります。 CSS クラスを単に切り替えるのは簡単そうに見えますが、ブラウザの最適化が原因でこのアプローチがうまくいかないことがよくあります。

解決策: 非遷移クラスと強制リフロー

遷移を効果的に無効にするには、 CSS クラスを使用すると、! important フラグを使用してすべての遷移プロパティを none に設定できます。ただし、このクラスだけでは、期待した動作は得られません。

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

その秘訣は、CSS プロパティを変更した後に要素のリフローを強制することにあります。この更新により保留中の CSS 変更がフラッシュされ、移行が確実に無効になります。信頼できる方法の 1 つは、要素の offsetHeight プロパティにアクセスすることです。

JavaScript 実装

jQuery なし:

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow, flushing the CSS changes
someElement.classList.remove('notransition'); // Re-enable transitions

ありjQuery:

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions

警告

既存のスタイルをオーバーライドするには ! important で十分であることを確認してください。そうでない場合は、element.style.setProperty を使用してトランジションを手動で無効にして再度有効にすることを検討してください。最新のブラウザのほとんどはベンダー プレフィックスなしの遷移をサポートしているため、ベンダー プレフィックスは省略できます。

以上がJavaScript で CSS トランジションを確実に無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。