CSS3 전환의 시작과 끝을 어떻게 감지할 수 있나요?

CSS3 전환 이벤트 감지

CSS3의 전환은 웹 요소에 동적 효과를 추가하여 응답성을 향상시킵니다. 그러나 다른 요소나 작업과의 동기화를 위해 이러한 전환의 시작과 끝을 추적해야 하는 경우가 많습니다.

답변

W3C CSS 전환 초안

W3C CSS 전환 초안은 각 속성에 대해 완료 이벤트가 실행되도록 지정합니다. 전환을 겪는 것입니다. 이 이벤트를 통해 개발자는 전환이 완료되는 시기를 감지하고 동기화된 작업을 수행할 수 있습니다.

Webkit

Webkit에서는 webkitTransitionEnd 이벤트에 대해 이벤트 리스너 기능을 설정할 수 있습니다. 이 이벤트는 전환이 끝나면 시작됩니다.

box.addEventListener('webkitTransitionEnd', function( event ) { alert( "Finished transition!" ); }, false );

Mozilla, Opera 및 Internet Explorer

이러한 브라우저는 동일한 전환 종료 이벤트를 지원하지만 Opera의 경우 'o' 접두사가 붙고 Internet Explorer의 경우 'webkit'이 붙습니다. 이벤트는 전환이 완료되면 발생합니다.

CSS 전환 이벤트와 브라우저 간 호환성에 대한 자세한 내용은 CSS3 전환 기능 정규화에 대한 스택 오버플로 토론을 참조하세요.

위 내용은 CSS3 전환의 시작과 끝을 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!