transitionend 이벤트
예시
CSS 전환이 종료되면 <div> 요소로 작업을 수행합니다.
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
정의 및 사용
transitionend 이벤트는 CSS 전환이 완료되면 발생합니다.
참고: 전환이 완료되기 전에 제거된 경우(예: CSS transition-property 속성이 제거된 경우) transitionend 이벤트는 실행되지 않습니다.
CSS 전환에 대한 자세한 내용은 CSS3 전환 에 대한 자습서를 참조하세요 .
브라우저 지원
표의 숫자는 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
"webkit", "moz" 또는 "o" 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Event | |||||
---|---|---|---|---|---|
transitionend | 26.0 4.0 (webkitTransitionEnd) |
10.0 | 16.0 4.0 (mozTransitionEnd) |
6.1 3.1 (webkitTransitionEnd) |
12.1 10.5 (oTransitionEnd) |
통사론
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", myScript); // Standard syntax
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
거품: | 네 |
---|---|
취소 가능: | 네 |
이벤트 유형: | 전환 이벤트 |
DOM 버전: | 레벨 3 이벤트 |
관련 페이지
CSS 튜토리얼: CSS3 전환
CSS 참조: CSS3 전환 속성
CSS 참조: CSS3 transition-property 속성