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

Mary-Kate Olsen
풀어 주다: 2024-10-31 08:48:29
원래의
780명이 탐색했습니다.

Why Does My CSS Transition Skip and the Callback Fail to Fire?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!