부드러운 요소 크기 조정을 위해 CSS 전환 효과를 일시적으로 비활성화하려면 어떻게 해야 합니까?

CSS 전환 효과를 일시적으로 비활성화

웹 개발에서 요소를 변경할 때 원활한 크기 조정이나 모양 조정을 위해 CSS 전환 효과를 비활성화해야 하는 경우가 많습니다. 가장 우아한 솔루션은 다음과 같습니다.

솔루션

CSS 클래스 만들기:

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

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

다음과 함께 JavaScript 사용 jQuery:

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

설명:

이 솔루션은 CSS 클래스를 사용하여 기존 전환 설정을 !important로 재정의합니다. 그런 다음 요소에 클래스를 추가하고, 원하는 CSS를 변경하고, offsetHeight를 사용하여 리플로우를 강제한 다음, 마지막으로 클래스를 제거하여 전환을 다시 활성화합니다.

고려 사항

• 다음을 확인하세요. .notransition은 기존 규칙을 재정의합니다(CSS에서 !important 사용을 고려).
• 다음 이후에 리플로우를 강제합니다. offsetHeight를 읽거나 다른 적절한 방법을 사용하여 전환을 비활성화합니다.
• 이 솔루션은 여러 브라우저에서 작동하며 CSS 전환 효과를 일시적으로 비활성화하는 가장 우아한 방법입니다.

위 내용은 부드러운 요소 크기 조정을 위해 CSS 전환 효과를 일시적으로 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!