CSS 전환이 숨겨진 요소에서 작동하지 않는 이유는 무엇입니까?

숨겨진 요소에 대해 CSS 전환이 실행되지 않음

웹 개발에서는 CSS 전환을 사용하여 요소 속성에 대한 변경 사항을 애니메이션으로 표시하는 것이 일반적입니다. 그러나 일반적인 걸림돌은 요소가 처음에 숨겨졌다가(예: display: none) 표시되지만 CSS 전환이 활성화되지 않는 경우입니다.

CSSOM 및 DOM

이 동작을 이해하려면 CSS 객체 모델(CSSOM)과 문서 객체 모델 간의 관계를 고려해야 합니다. (돔). DOM은 페이지의 HTML 구조를 나타내고, CSSOM은 각 요소에 대해 계산된 스타일을 나타냅니다.

렌더링 프로세스 중에 DOM 조작(예: 디스플레이 속성 변경)이 먼저 발생합니다. 그런 다음 브라우저는 리플로우 또는 레이아웃이라고 알려진 페이지의 모든 요소에 대해 계산된 스타일(CSSOM)을 다시 계산합니다. 마지막으로 변경 사항은 화면(페인트)에 시각적으로 렌더링됩니다.

CSS 전환에 미치는 영향

CSS 전환에는 시작을 계산하기 위해 요소의 초기 계산 스타일이 필요합니다. 상태. 그러나 숨겨진 요소의 경우 계산된 스타일은 표시되지 않으므로 기본적으로 null입니다. 이는 전환이 트리거되면 모든 전환 가능한 값에 대해 초기 상태가 유효하지 않음을 의미합니다.

솔루션

이 문제를 해결하려면 다음 중 하나를 사용할 수 있습니다. 접근 방식:

• 리플로우 강제: requestAnimationFrame 또는 기타 방법 사용 리플로우를 트리거하는 것은 브라우저가 계산된 스타일을 다시 계산하도록 합니다. 전환이 트리거되기 직전에 리플로우를 호출하면 계산된 스타일이 최신 상태인지 확인할 수 있습니다.
• 내부적으로 $.animate()**: .animate()를 사용하세요. DOM 조작을 트리거한 다음 전환을 트리거하도록 콜백을 예약하여 리플로우를 강제합니다. 그러나 이 접근 방식은 일반적으로 직접 리플로우 방법을 사용하는 것보다 느립니다.

예

다음 코드 조각은 requestAnimationFrame을 사용하여 리플로우를 강제하는 방법을 보여줍니다.

$('button').on('click', function() {
  $('.b').show(); // Show the hidden element

  requestAnimationFrame(() => { // Force a reflow
    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

requestAnimationFrame을 사용하여 CSS 전환이 성공적으로 실행되는지 확인합니다. 초기에 숨겨진 요소에도 적용됩니다.

위 내용은 CSS 전환이 숨겨진 요소에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!