jQuery로 CSS3 전환 이벤트 리스너

Question

기사 요소에 CSS3 전환 효과를 구현하고 있지만 이벤트 수신기 전환 종료은 jQuery가 아닌 순수한 JavaScript에서만 작동합니다.

// this works 
this.parentNode.addEventListener('transitionend', function() {alert("1"); }, true); 

// this does not work 
$(this).parent().addEventListener('transitionend', function() {alert("1"); }, true); 

누군가가 내가 잘못 뭐하는 거지 나를 설명 할 수 :

아래의 예를 참조하십시오? 첫 번째는 정말 (이 공급 업체 접두사를 요구해야하기 때문에 나는 그것을 의심) 작동하면

이

$(this).parent().bind('transitionend', function() {alert("1"); }); 

Answer 1

당신은 bind() 또는 on()이 방법을 사용해야합니다

$(this).parent().on('transitionend', function() { 
    alert("1"); 
}); 

Answer 2

,이 역시 작동합니다 :

jQuery를에

Answer 3

this.parentNode은 자바 스크립트 개체를 반환합니다. 속성이 있습니다. .addEventListener $(this).parent()은 jQuery 객체를 반환합니다. 그것은

$(this).parent().on('webkitTransitionEnd oTransitionEnd transitionend msTransitionEnd', function() { 
    alert("1"); 
}) 

Answer 4

또한 양지, 대신 시도 속성 .addEventListener

을 가지고 있지 않는 여러 transitionEnd 콜백을 얻을 것이다 당신이 요소에 여러 변환을 실행하는 경우 (예를 들면. 불투명도 및 폭) .

jQuery를 사용하여 이벤트를 div의 전환 끝으로 바인딩하는 경우 one() 함수 사용을 고려할 수 있습니다.

$(this).parent().one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() { 
    // your code when the transition has finished 
}); 

즉, 코드는 처음에만 실행됩니다. 따라서 동일한 요소에서 네 가지 전환이 발생하면 콜백은 한 번만 실행됩니다.