CSS 전환이 시작되지 않거나 콜백이 호출되지 않음

문제 요약

CSS 전환을 사용하여 HTML 요소의 위치가 업데이트됩니다. 그러나 전환 전환 end 이벤트 리스너를 추가했음에도 불구하고 전환이 트리거되지 않거나 콜백 함수가 호출되지 않습니다. 이 문제는 변경 사항을 setTimeout(1ms)으로 래핑하여 해결할 수 있습니다.

해결 방법 설명

이 동작의 원인은 브라우저의 렌더링 프로세스에 있습니다. 브라우저가 CSS 전환을 적용하려면 먼저 요소에 인라인 스타일을 적용해야 합니다. 요소가 아직 DOM에 없으면 계산된 스타일 표시가 ""로 설정됩니다.

새 스타일이 설정되면 브라우저는 아직 인라인 스타일을 적용하지 않은 것입니다. 따라서 요소의 계산된 스타일은 ""로 유지되며 왼쪽 및 위쪽 값은 여전히 ​​0px입니다.

따라서 다음 프레임 그리기 전에 전환 속성이 ​​적용되면 왼쪽 및 위쪽 값은 이미 원하는 값입니다. 이로 인해 수행할 전환이 없고 Transitionend 이벤트가 트리거되지 않습니다.

이 문제를 해결하려면 Element.offsetHeight getter 또는 최신 스타일이 필요한 기타 DOM 메소드를 사용하여 리플로우를 강제할 수 있습니다. . 이렇게 하면 브라우저가 전환을 적용하기 전에 스타일을 업데이트하여 원활한 구현이 보장됩니다.

예

다음 코드는 문제와 해결 방법을 보여줍니다.

document.body.innerHTML  = tablehtml;

var animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) {
  animdiv.style.backgroundColor = 'red';
}, false);

// force a reflow
animdiv.offsetTop;

animdiv.style.backgroundColor = 'green';
Object.assign(animdiv.style, {
  left: "100px",
  top: "100px"
});

이 예에서는 animdiv 요소의 offsetTop getter를 사용하여 해당 위치가 업데이트되기 전에 강제로 리플로우를 수행합니다. 이렇게 하면 CSS 전환이 올바르게 트리거되고 콜백 함수가 호출됩니다.