JavaScript で CSS トランジションを効率的に無効化し、再度有効化するにはどうすればよいですか?

CSS トランジションの無効化と再有効化

一般的な Web アプリケーションでは、DOM 要素はさまざまな CSS トランジションの影響を受ける可能性があります。ただし、要素のサイズ変更など、特定の操作中にこれらの効果を一時的に無効にする必要がある場合があります。

エレガントな無効化と再有効化

エレガントにするにはCSS トランジションを無効にして再度有効にすると、CSS と CSS の組み合わせを利用できます。 JavaScript.

CSS クラス:

要素の遷移プロパティをオーバーライドする「notransition」CSS クラスを作成します:

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

JavaScript:

なしjQuery:

const someElement = document.getElementById("some-element");

// Disable transitions
someElement.classList.add('notransition');

// Perform CSS changes
doWhateverCssChangesYouWant(someElement);

// Trigger a reflow
someElement.offsetHeight;

// Re-enable transitions
someElement.classList.remove('notransition');

jQuery の場合:

const $someElement = $('#some-element');

// Disable transitions
$someElement.addClass('notransition');

// Perform CSS changes
doWhateverCssChangesYouWant($someElement);

// Trigger a reflow
$someElement[0].offsetHeight;

// Re-enable transitions
$someElement.removeClass('notransition');

説明:

1. 追加無効にする「notransition」クラス
2. 必要な CSS 変更を要素に適用します。
3. 要素の offsetHeight プロパティを読み取って、強制リフローをトリガーします。
4. 再度有効にするには、「notransition」クラスを削除します。トランジション。

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