JavaScript를 통해 적용하면 CSS 전환이 작동하지 않는 이유는 무엇입니까?

JavaScript를 통해 할당할 때 CSS 전환이 적용되지 않습니다

JavaScript로 CSS3 전환을 적용해도 예상대로 작동하지 않습니다. 이 문제는 전환 속성이 ​​포함된 CSS 클래스를 동적으로 할당할 때 발생합니다.

전환을 효과적으로 트리거하려면 전제 조건은 다음과 같습니다.

• 속성의 명시적 정의(예: 불투명도: 0;)
• 정의된 전환(예: 전환: 불투명도 2s;)
• 새 속성 설정(예: 불투명도: 1;)

JavaScript에서 문제는 다음에서 비롯됩니다. 브라우저의 처리 시간. 올바른 스타일을 먼저 적용한 다음 전환을 담당하는 CSS 클래스를 설정하기 전에 약간의 지연이 필요합니다. 이 지연을 통해 브라우저는 전환이 적용되기 전에 적용된 스타일을 등록할 수 있습니다.

이 지연을 구현하려면 window.setTimeout()을 사용하여 전환이 포함된 CSS 클래스 추가를 연기하세요.

<code class="js">window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);</code>

또는 HTML이 로드될 때 HTML에 전환 트리거 클래스(target-fadein-begin)를 포함합니다.

<code class="html"><div class="fadeable target-fadein-begin"></div></code>

이러한 기준을 충족하면 JavaScript를 통해 트리거된 CSS 전환이 예상대로 작동할 수 있습니다. 끊김 없는 애니메이션.

위 내용은 JavaScript를 통해 적용하면 CSS 전환이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!