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

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

DDD

풀어 주다： 2024-11-30 20:12:18

원래의

123명이 탐색했습니다.

How Can I Temporarily Disable CSS Transition Effects for Smooth Element Resizing?

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를 사용하여 리플로우를 강제한 다음, 마지막으로 클래스를 제거하여 전환을 다시 활성화합니다.