CSS 전환이 건너뛰고 콜백이 실행되지 않는 이유는 무엇입니까?

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

귀하의 문제는 CSS 전환과 브라우저의 기발한 문제로 인해 발생합니다. 렌더링 과정. 처음에는 HTML에 CSS 위치 값을 인라인하여 왼쪽 및 위쪽 속성에 전환을 설정합니다. 새 위치 값을 추가할 때 전환을 예상했지만 콜백을 트리거하지 않고 건너뛰었습니다.

흥미롭게도 스타일 변경을 래핑하기 위해 1ms setTimeout을 추가하면 전환이 시작되었습니다. 그러나 때로는 콜백이 실행되지 않은 채로 남아 있는 경우도 있습니다. 이 동작은 브라우저의 타이밍으로 인해 발생할 수 있습니다.

설명:

새 스타일이 설정되면 브라우저는 아직 인라인 스타일을 계산된 스타일에 적용하지 않았습니다. . 요소의 계산된 스타일은 왼쪽 및 위쪽 속성에 대해 설정되지 않은 상태로 유지되며 기본값은 0px입니다. 나중에 적용된 모든 전환은 단순히 설정된 값과 일치하므로 전환이 발생하지 않습니다.

이 문제를 해결하려면 리플로우를 통해 스타일을 업데이트해야 합니다. 이는 offsetHeight getter 또는 리플로우를 트리거하는 기타 유사한 방법을 사용하여 수행할 수 있습니다.

offsetHeight 사용 예:

<code class="javascript">let tablehtml = `
<div id="spanky" 
  style="position: absolute; 
    left: 10px; 
    top: 10px; 
    background-color:blue; 
    width:20px; 
    height:20px;
    transition: left 1000ms linear 0s, top 1000ms linear 0s;">
</div>`;

document.body.innerHTML += tablehtml;

let animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) { 
  animdiv.style.backgroundColor='red';
}, false);
// force a reflow
animdiv.offsetTop;
// now animdiv will have all the inline styles set
// it will even have a proper display

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

위 내용은 CSS 전환이 건너뛰고 콜백이 실행되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!