JavaScript를 통해 적용하면 CSS 전환이 실패하는 이유는 무엇입니까?

JavaScript를 통해 할당할 때 CSS 전환 수정

JavaScript를 통해 CSS3 전환을 적용하려고 하면 지정된 전환이 실패하는 상황이 발생할 수 있습니다. 올바른 스타일이 적용되었음에도 불구하고 실행됩니다. 특히 브라우저의 검사기를 통해 직접 적용할 때 전환이 작동하는 경우 이 동작은 혼란스러울 수 있습니다.

기본 원인

문제를 완전히 이해하려면 다음을 이해해야 합니다. CSS 전환 메커니즘. 전환이 적용되려면 세 가지 중요한 단계가 수행되어야 합니다.

1. 대상 요소에는 전환 속성이 ​​명시적으로 정의되어 있어야 합니다(예: 전환: 불투명도 2s;).
2. 요소는 다음과 같아야 합니다. 전환 속성 집합의 초기 값(예: 불투명도: 0;)이 있습니다.
3. 전환 속성의 새 값을 적용해야 합니다(예: 불투명도: 1;).

제공된 예제의 경우처럼 JavaScript가 클래스를 동적으로 할당할 때 잠재적인 문제가 있습니다. 브라우저가 이러한 변경 사항을 처리하는 데 시간이 필요하며 대상 클래스(예: ".target-fadein")를 동적으로 할당하면 필요한 지연이 제공되지 않을 수 있습니다.

해결책

이 문제를 해결하려면 대상 클래스를 할당하기 전에 지연이 필요합니다. 이렇게 하면 브라우저가 전환 속성을 적용하고 애니메이션을 준비할 충분한 시간을 확보할 수 있습니다. 다음 코드 조각은 대상 클래스를 적용할 때 지연의 사용을 보여줍니다.

window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);

또는 대상 클래스 ".target-fadein-begin"을 HTML에 직접 추가하여 구문 분석되도록 할 수도 있습니다. 로드 중이며 전환 준비가 완료되었습니다.

추가 정보

단순히 요소에 전환을 추가해도 애니메이션이 실행되지 않는다는 점을 인식하는 것이 중요합니다. 실제 애니메이션은 전환 속성 값을 변경하여 트리거됩니다. 이는 검사기에서 초기 및 새 속성 값을 수동으로 설정하는 것이 작동하는 이유를 설명합니다.

자세한 설명을 위해 다음 코드 조각을 고려하십시오.

// Works
document.getElementById('fade1').className += ' fade-in'

// Doesn't work
document.getElementById('fade2').className = 'fadeable'
document.getElementById('fade2').className += ' fade-in'

// Works
document.getElementById('fade3').className = 'fadeable'

window.setTimeout(function() {
  document.getElementById('fade3').className += ' fade-in'
}, 50)

이 시나리오에서 첫 번째 블록은 다음과 같이 작동합니다. 전환을 위한 세 가지 조건이 모두 충족됩니다. 요소에는 전환이 정의되어 있으며 초기 불투명도는 0으로 설정되고 새 불투명도는 1로 설정됩니다. 전환 클래스가 적용되기 전에 초기 불투명도 값이 명시적으로 정의되지 않았기 때문에 두 번째 블록은 실패합니다. 세 번째 블록은 지연을 통해 전환이 적용되기 전에 브라우저가 초기 값 설정을 처리할 수 있기 때문에 작동합니다.

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