CSS3 전환의 시작과 끝을 어떻게 감지합니까?

CSS3 전환 이벤트

CSS3 전환 작업을 할 때 전환이 언제 시작되거나 종료되었는지 아는 것이 유용한 경우가 많습니다. CSS3에는 이러한 전환을 나타내기 위해 요소에 의해 실행되는 다양한 이벤트가 있습니다.

CSS 전환 종료 이벤트

정의:
전환 끝 지정된 속성에 대해 CSS 전환이 완료되면 이벤트가 트리거됩니다.

구문:

element.addEventListener('transitionend', callbackFunction, { once: true });

예:

const box = document.querySelector('.box');

box.addEventListener('transitionend', function(e) {
  console.log(`Transition for property ${e.propertyName} has ended.`);
}, { once: true });

기타 전환 이벤트

전환 종료 이벤트 외에도 일부 브라우저는 추가 이벤트도 제공합니다.

Webkit 관련 이벤트:

• webkitTransitionStart: CSS 전환이 시작될 때 트리거됩니다.
• webkitTransitionRun: CSS 전환 중에 여러 번 트리거됩니다.

Mozilla 관련 이벤트:

• transitionstart: 속성에 대한 CSS 전환이 시작될 때 트리거됩니다.

Opera 관련 이벤트:

• oTransitionStart: 속성에 대한 CSS 전환이 시작될 때 트리거됩니다.

인터넷 Explorer 이벤트:

• MSTransitionEnd: 속성의 CSS 전환이 끝날 때 트리거됩니다.

브라우저 호환성

위 이벤트는 W3C CSS Transitions Draft 및 해당 브라우저 문서에 제공된 사양에 따라 다양한 브라우저에서 지원됩니다.

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