JavaScript에서 CSS 전환을 안정적으로 비활성화하려면 어떻게 해야 합니까?

CSS 전환 문제 극복

웹 개발 영역에서 CSS 전환 효과를 일시적으로 비활성화하면 문제가 발생할 수 있습니다. 단순히 CSS 클래스를 전환하는 것이 간단해 보일 수 있지만 브라우저 최적화로 인해 이 접근 방식이 부족한 경우가 많습니다.

해결책: 전환 없는 클래스 및 강제 리플로우

전환을 효과적으로 비활성화하려면, !important 플래그를 사용하여 모든 전환 속성을 없음으로 설정하기 위해 CSS 클래스를 사용할 수 있습니다. 그러나 이 클래스는 だけdedは、期待した동작을 만들어 냈습니다.

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

CSS 속성을 수정한 후 요소를 강제로 리플로우하는 것이 비결입니다. 이 새로 고침은 보류 중인 CSS 변경 사항을 플러시하여 전환이 비활성화되도록 합니다. 신뢰할 수 있는 방법 중 하나는 요소의 offsetHeight 속성에 액세스하는 것입니다.

JavaScript 구현

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

With jQuery:

$someElement.addClass('notransition'); // Disable transitions
doWhateverCssChangesYouWant($someElement);
$someElement[0].offsetHeight; // Trigger a reflow, flushing the CSS changes
$someElement.removeClass('notransition'); // Re-enable transitions

주의 사항

!important가 기존 스타일을 재정의하기에 충분한지 확인하세요. 그렇지 않은 경우 element.style.setProperty를 사용하여 전환을 수동으로 비활성화했다가 다시 활성화하는 것이 좋습니다. 대부분의 최신 브라우저는 공급업체 접두어 없이 전환을 지원하므로 공급업체 접두어는 생략할 수 있습니다.

위 내용은 JavaScript에서 CSS 전환을 안정적으로 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!