ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript で CSS トランジションを効率的に無効化し、再度有効化するにはどうすればよいですか?

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

Linda Hamilton
リリース: 2024-11-28 22:47:11
オリジナル
443 人が閲覧しました

How Can I Efficiently Disable and Re-enable CSS Transitions in JavaScript?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート