JavaScript에 할당된 CSS 전환이 작동하지 않는 이유는 무엇입니까?

JavaScript에 할당된 CSS 전환이 작동하지 않음

JavaScript를 통해 슬라이드쇼에 CSS3 전환을 적용할 때 지정된 올바른 스타일이 적용되었음에도 불구하고 전환이 작동하지 않습니다. 이러한 불일치는 CSS 전환이 전환이 처음 정의될 때가 아니라 지정된 속성 값이 변경될 때만 트리거되기 때문에 발생합니다.

이 문제를 해결하려면 다음 세 가지 조건이 충족되는지 확인하세요.

1. 속성 명시적 정의: 영향을 받는 요소에는 초기 스타일에 명시적으로 선언된 속성이 있어야 합니다.
2. 전환 정의: 요소에는 원하는 전환이 정의되어 있어야 합니다. 예: "transition: opacity 2s;".
3. 속성 값 변경: 전환을 정의한 후 새 속성 값을 설정하여 애니메이션을 트리거합니다.

귀하의 예에서는 브라우저가 동적으로 할당된 전환을 처리하기 전에 속성 값 변경("불투명도: 1" 설정)이 발생했기 때문에 전환이 작동하지 않았습니다. 이 문제를 해결하려면 "target-fadein" 클래스를 할당하기 전에 지연을 도입하세요.

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

또는 HTML에 "target-fadein-begin" 클래스를 직접 포함하여 로드 시 구문 분석되도록 하세요. 전환 준비가 완료되었습니다.

전환 자체의 JavaScript 할당이 애니메이션을 시작하지 않는다는 점을 기억하세요. 전환 효과를 유발하는 것은 속성 값의 변경입니다.

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