CSS3 전환이 시작되고 끝나는 시기를 어떻게 감지합니까?

CSS3 전환 이벤트

CSS3 전환은 웹 페이지에 애니메이션과 효과를 추가하는 원활한 방법을 제공합니다. 그러나 이러한 애니메이션을 효과적으로 제어하고 동기화하려면 애니메이션이 시작되고 끝나는 시기를 아는 것이 중요합니다. CSS3 전환 이벤트를 입력하세요.

이벤트 유형

사용 중인 브라우저에 따라 CSS3 전환이 시작되거나 끝날 때 발생하는 다양한 이벤트가 있습니다.

• W3C CSS 전환 초안:

  • 전환시작(시작)
  • 전환끝 (끝)

• 웹킷:

  • webkitTransitionEnd (끝)

• Mozilla:

  • 전환끝 (끝)

• 오페라:

  • oTransitionEnd(끝)

• 인터넷 Explorer:

  • transitionend(end)

이벤트 수신

CSS3 전환 이벤트를 수신하려면 JavaScript 이벤트 리스너를 사용할 수 있습니다:

element.addEventListener('transitionend', function(event) {
  // Transition completed
});

브라우저 호환성

CSS3 전환 이벤트의 가용성은 브라우저에 따라 다릅니다. 호환성 정보는 아래 표를 참조하세요.

Browser	Transition Start Event	Transition End Event
W3C CSS Transitions Draft	Yes	Yes
Webkit	No	Yes
Mozilla	No	Yes
Opera	No	Yes
Internet Explorer	No	Yes

사용 예

다음 코드는 CSS3 전환 완료를 수신하기 위해 Transitionend를 사용하는 방법을 보여줍니다.

<div>

#box 요소 위로 마우스를 가져가면 전환이 너비를 200px로 부드럽게 애니메이션화합니다. 전환이 완료되면 전환 종료 이벤트가 시작됩니다.

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