내 CSS 전환이 인라인 스타일에서 작동하지 않는 이유는 무엇이며 어떻게 해결합니까?

CSS 전환이 시작되지 않거나 콜백이 호출되지 않습니다

문제:

JavaScript 기반 게임 프로젝트에서 jQuery 애니메이션을 발사체 움직임에 대한 CSS 전환으로 대체하려는 시도는 실패했습니다. setTimeout 지연을 적용한 경우에도 전환이 건너뛰거나 콜백을 트리거하지 않았습니다.

설명:

이 동작은 브라우저가 적용되지 않았기 때문에 발생합니다. 전환 속성을 적용하기 전에 CSS 스타일을 인라인합니다. 새 스타일이 설정되면 요소의 계산된 스타일은 여전히 ​​표시, 왼쪽 및 위쪽 위치에 대한 기본값을 갖습니다.

왼쪽 및 위쪽 값은 0px(기본값)로 유지되므로 전환은 아무 관련이 없습니다. 값이 새 스타일에 설정된 값과 일치하기 때문입니다. 이 문제를 해결하려면 전환을 적용하기 전에 브라우저 리플로우에서 스타일을 강제로 업데이트해야 합니다.

해결책:

브라우저 리플로우를 강제하려면 Element.offsetHeight를 활용하세요. 얻는 사람. 예:

<code class="js">// Assume animdiv is the element you want the transition to work on
animdiv.offsetTop;
// Now animdiv has all inline styles set

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

이 단계에서는 요소의 계산된 스타일이 최신 상태인지 확인하고 전환이 예상대로 적용됩니다.

위 내용은 내 CSS 전환이 인라인 스타일에서 작동하지 않는 이유는 무엇이며 어떻게 해결합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!