부드러운 애니메이션을 위해 DOM 요소 크기를 조정하는 동안 CSS 전환을 우아하게 비활성화하려면 어떻게 해야 합니까?

부드러운 크기 조정을 위한 CSS 전환 효과의 우아한 비활성화

원활한 크기 조정을 위해 CSS 전환 효과를 비활성화하는 것이 중요한 상황에 직면하셨습니다. DOM 요소. 이 문제를 해결하기 위해 우아하고 효과적인 솔루션을 살펴보겠습니다.

전환 비활성화를 위한 CSS:

'.notransition' 클래스를 만들어 기존 전환 규칙을 재정의합니다.

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

자바스크립트 구현:

일반 Javascript 사용:

someElement.classList.add('notransition'); // Disable transitions
doWhateverCssChangesYouWant(someElement);
someElement.offsetHeight; // Trigger a reflow
someElement.classList.remove('notransition'); // Re-enable transitions

사용 jQuery:

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

설명:

1. '.notransition' 클래스 적용: 이 클래스는 전환을 비활성화합니다. CSS 전환 속성을 재정의하여 효과를 적용합니다.
2. 원하는 대로 수행 CSS 변경: 전환이 비활성화된 상태에서 필요에 따라 높이 또는 기타 CSS 속성을 변경합니다.
3. 리플로우 트리거: 요소의 offsetHeight 속성을 읽어 리플로우를 강제하고 보류 중인 CSS 변경 사항을 플러시합니다. .
4. 클래스 실행 취소: 리플로우가 트리거되면 '.notransition'을 제거합니다. 클래스를 사용하여 전환을 복원합니다.

이 접근 방식을 사용하면 크기 조정 프로세스 중에 CSS 전환이 정상적으로 비활성화되었다가 다시 활성화되어 부드럽고 원활한 애니메이션이 가능해집니다.

위 내용은 부드러운 애니메이션을 위해 DOM 요소 크기를 조정하는 동안 CSS 전환을 우아하게 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!