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

숨겨진 요소에서 처음에는 CSS 전환이 작동하지 않습니다.

CSS 전환을 사용하여 숨겨진 요소의 속성에 애니메이션을 적용하려고 하면 다음과 같은 문제가 발생할 수 있습니다. 요소가 최종 위치에 즉시 표시되는 문제. 이는 CSSOM(CSS 개체 모델)과 DOM(문서 개체 모델) 간의 관계 때문입니다.

리플로우와 CSSOM의 역할

CSS 전환에 따라 결정됩니다. 요소의 계산된 스타일을 기반으로 한 초기 상태입니다. 그러나 요소에 display: none이 있는 경우 해당 요소는 CSSOM에 효과적으로 표시되지 않으므로 브라우저는 계산된 스타일을 무시합니다.

귀하의 시나리오에서는 .b에서 전환을 트리거하면 계산된 스타일이 없습니다. , 숨겨져 있으므로. 따라서 전환을 제대로 초기화할 수 없습니다.

리플로우 강제

이 문제를 해결하려면 시작하기 전에 브라우저가 숨겨진 요소의 계산된 스타일을 업데이트하도록 강제할 수 있습니다. 전환. 이는 리플로우를 트리거하여 수행됩니다.

리플로우는 브라우저가 전체 페이지의 레이아웃과 계산된 스타일을 다시 계산하는 프로세스입니다. 이는 화면을 새로 고칠 때와 같이 필요할 때 특정 DOM 메소드 또는 브라우저 자체에 의해 트리거될 수 있습니다.

requestAnimationFrame() API를 사용하면 다음 페인트 직전에 리플로우를 수행하도록 브라우저에 요청할 수 있습니다. 작동이 발생합니다. 이렇게 하면 전환이 시작될 때 요소의 계산된 스타일이 최신 상태로 유지됩니다.

업데이트된 코드

$('button').on('click', function () {
  $('.b').show(); // Apply display:block synchronously

  requestAnimationFrame(() => {
    // Force a reflow
    document.body.offsetHeight;

    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
})

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