처음에 숨길 때 요소 전환이 실패하는 이유는 무엇입니까?

처음 숨길 때 요소 전환 실패

시나리오 개요

'라는 라벨이 붙은 두 가지 요소를 고려하세요. A' 및 'B'. 여기서 'B'는 처음에 display: none을 사용하여 숨겨졌습니다. $.show() 또는 $.toggle()과 같은 메서드로 'B'를 공개할 때 전환을 사용하여 애니메이션을 적용하면 요소가 애니메이션 없이 최종 위치에 즉시 나타납니다.

설명

근본 원인은 DOM(문서 개체 모델)과 CSSOM(CSS 개체 모델) 간의 관계에 있습니다. CSS 전환은 요소의 마지막 계산 값에 의존합니다. 처음에 숨겨진 요소의 경우 계산된 값은 display: none이며, 이는 본질적으로 CSSOM에서 요소를 제거합니다.

DOM 조작 및 리플로우

DOM 조작 단계에는 업데이트가 포함됩니다. 비동기 프로세스인 JavaScript 객체입니다. 이와 대조적으로 CSS 규칙을 업데이트하고 계산된 스타일을 다시 계산하는 리플로우 단계는 필요한 경우에만 발생합니다. 처음에 숨겨진 요소에는 계산된 스타일이 없으므로 DOM 조작 중에 리플로우를 트리거하지 않습니다.

전환 초기 상태

결과적으로 ' B'가 시작되면 아직 리플로우가 발생하지 않았기 때문에 초기 상태가 정의되지 않습니다. 이로 인해 잘못된 전환이 발생할 수 있습니다.

리플로우 강제 실행

이 문제를 해결하려면 전환을 트리거하기 전에 강제로 리플로우를 수행할 수 있습니다. 최신 계산 값이 필요하므로 강제 리플로우를 수행하는 Element.getBoundingClientRect() 또는 element.offsetHeight를 사용하여 이를 달성할 수 있습니다.

강제 리플로우를 사용한 향상된 예

다음은 전환에 애니메이션을 적용하기 전에 리플로우를 강제하는 수정된 코드 조각입니다.

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

  requestAnimationFrame(() => { // wait just before the next paint
    document.body.offsetHeight; // force a reflow
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

전환이 트리거되기 전에 리플로우를 강제하면 계산된 값이 최신 상태인지 확인할 수 있습니다. , 전환이 올바르게 작동하도록 합니다.

위 내용은 처음에 숨길 때 요소 전환이 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!