DOM 操作中に CSS トランジションを一時的に無効にする方法は?

CSS トランジション効果を一時的に無効にする方法

CSS トランジションが適用された DOM 要素を操作する場合、状況によっては、サイズ変更をスムーズに行うために、これらの効果を一時的に無効にします。この記事では、これを実現するための最も洗練された解決策について説明します。

トランジションの無効化

CSS トランジションを効果的に無効にするには、次のような「notransition」クラスを作成できます。

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

で実装JavaScript

JavaScript で「notransition」クラスを適用するには 2 つの方法があります:

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

説明

トランジションを無効にする場合の問題は、ブラウザが JavaScript の実行が終了するまでスタイルの変更をバッファリングし、それらを 1 回の「リフロー」で適用することです。 。」これにより、不要なアニメーションが発生する可能性があります。リフローを強制して CSS 変更をフラッシュするには、要素の offsetHeight プロパティを読み取る必要があります。

追加メモ

• 「!重要」が十分であることを確認してください。既存のスタイルをオーバーライドする重み。
• ブラウザのベンダー プレフィックス付きプロパティを考慮する互換性。
• このソリューションは遷移をサポートするブラウザに適していますが、すべてのブラウザがサポートするわけではないことに注意してください。

以上がDOM 操作中に CSS トランジションを一時的に無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。