JavaScript에서 CSS 전환을 효율적으로 비활성화하고 다시 활성화하려면 어떻게 해야 합니까?

CSS 전환 비활성화 및 다시 활성화

일반적인 웹 애플리케이션에서 DOM 요소는 다양한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!