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