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" 클래스를 적용하는 방법에는 두 가지가 있습니다.

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 실행이 끝날 때까지 브라우저가 스타일 변경 사항을 버퍼링하고 단일 "리플로우"에 적용한다는 것입니다. ." 이로 인해 원치 않는 애니메이션이 발생할 수 있습니다. 리플로우를 강제하고 CSS 변경 사항을 플러시하려면 요소의 offsetHeight 속성을 읽어야 합니다.

추가 참고 사항

• '!important'가 충분한지 확인하세요. 기존 스타일을 재정의하려면 가중치를 적용하세요.
• 브라우저에 대한 공급업체 접두어 속성을 고려하세요. 호환성.
• 이 솔루션은 전환을 지원하는 브라우저에 적합하지만 모든 브라우저가 지원하는 것은 아니라는 점을 기억하세요.

위 내용은 DOM 조작 중에 CSS 전환을 일시적으로 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!