transitionend 이벤트

DOM 이벤트 TransitionEvent

정의와 사용법

transitionend 이벤트는 CSS 변환이 완료될 때 발생합니다.

주의:예를 들어, CSS를 제거했을 때 변환을 완료하기 전에 제거되면, 예를 들어 transition-property 속성을 설정하면 transitionend 이벤트가 발생하지 않습니다.

CSS 전환에 대한 더 많은 지식을 얻으려면, 우리의 CSS3 전환 튜토리얼.

예제

CSS 전환이 끝나면 <div> 요소에 대해 일어나는 일을 설정합니다:

// 사파리 3.1에서 6.0까지의 코드
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 표준 문법
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

직접 시도해보세요

문법

object.addEventListener("webkitTransitionEnd", myScript);  // 사파리 3.1에서 6.0까지의 코드
object.addEventListener("transitionend", myScript);        // 표준 문법

주의:인터넷 익스플로러 8 이상의 버전은 지원하지 않습니다 addEventListener() 메서드.

기술 세부 사항

버블링: 지원
취소 가능: 지원
이벤트 유형: TransitionEvent
DOM 버전: 레벨 3 이벤트

브라우저 지원

표의 숫자는 이 이벤트를 완벽히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

"webkit"、"moz" 또는 "o" 뒤에 오는 숫자는 이러한 프리픽스를 사용하는 첫 번째 버전을 지정합니다.

이벤트 크롬 IE 파이어폭스 사파리 오페라
transitionend 26.0
4.0 (webkit)		 10.0 16.0
4.0 (moz)		 6.1
3.1 (webkit)		 12.1
10.5 (o)

관련 페이지

CSS 튜토리얼: CSS3 전환

CSS 참조 매뉴얼: CSS3 transition 속성

CSS 참조 설명서: CSS3 transition-property 속성

DOM 이벤트 TransitionEvent