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

초기 숨겨진 요소에서 CSS 전환이 작동하지 않음

CSS 표시: 없음을 사용하여 요소가 처음 숨겨지면 모든 CSS 전환이 해당 요소에 적용됩니다. 가시성이 변경되면 트리거되지 않습니다. 이는 CSS 전환이 숨겨진 요소의 경우 비어 있는 요소의 초기 계산 스타일에 의존하기 때문입니다.

CSSOM과 DOM

이 동작을 이해하려면, CSSOM(CSS 개체 모델)과 DOM(문서 개체 모델)을 구별하는 것이 중요합니다. DOM은 HTML 문서의 계층 구조를 나타내는 반면 CSSOM은 각 요소에 대해 계산된 스타일을 포함합니다.

리플로우 및 페인트

요소의 가시성이 변경되면 브라우저는 CSSOM을 업데이트하고 변경 사항을 반영하도록 페이지를 리플로우해야 합니다. 리플로우는 CSS 규칙을 기반으로 요소의 계산된 스타일과 위치를 다시 계산합니다. 페인팅은 리플로우 후에 발생하는 화면에 페이지를 렌더링하는 프로세스입니다.

전환 시작

CSS 전환은 요소의 초기 계산 스타일과 해당 요소 사이를 보간하여 작동합니다. 최종 스타일. 요소가 처음에 숨겨지면 계산된 스타일이 비어 있으므로 전환 알고리즘이 초기 상태를 생성할 수 없습니다.

해결책: 강제 리플로우

전환을 트리거하려면 숨겨진 요소에서는 가시성을 변경한 후 강제로 리플로우를 수행해야 합니다. 이는 브라우저가 페이지를 그리기 직전에 콜백을 실행하는 requestAnimationFrame API를 사용하여 달성할 수 있습니다.

requestAnimationFrame을 사용하면 브라우저가 CSSOM을 업데이트한 후 CSS 전환을 적용하여 전환을 허용할 수 있습니다. 올바르게 시작하려면

예

다음은 수정된 버전입니다. reflow를 강제하기 위해 requestAnimationFrame을 사용하는 코드:

$('button').on('click', function() {
  $('.b').show();

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

결론적으로, CSSOM에는 해당 요소에 대한 초기 계산 스타일이 포함되어 있지 않기 때문에 처음에 숨겨진 요소에서는 CSS 전환이 작동하지 않습니다. 전환을 트리거하려면 요소의 가시성을 변경한 후 강제로 리플로우를 수행해야 합니다.

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