CSS 전환에서 공급 업체 접두사를 사용하면 두 번 콜백이 발생합니다.

Question

CSS 전환을 사용할 때 la jQuery을 사용하는 훌륭한 솔루션 (here)을 구현하고 있습니다. 물론 webkitTransitionEnd에 대한 하나 transitionend에 대한 두 번째와 두 번 콜백을 발사 :

문제는 내가 공급 업체 접두사를 사용하는 경우, 크롬은 두 개 이상의 이벤트를 결합하는 것입니다. 내 코드 조각은 다음과 같습니다.

jQuery("#main").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
    console.log("POUM!"); 
}); 

잘못된 것이 있습니까? http://ianlunn.co.uk/articles/opera-12-otransitionend-bugs-and-workarounds/

이 견적은 말한다 : 이것이 당신의 문제를 해결하지만,이 링크에서 경우

Answer 1

합니다. Chrome은 단지 접두사와 접두사가없는 버전을 모두 사용합니다. 외부 변수를 사용하여

1. :

   은 몇 가지 옵션이 있습니다.

   var transitionend = (function(transition) { 
       var transEndEventNames = { 
        'WebkitTransition' : 'webkitTransitionEnd',// Saf 6, Android Browser 
        'MozTransition' : 'transitionend',  // only for FF < 15 
        'transition'  : 'transitionend'  // IE10, Opera, Chrome, FF 15+, Saf 7+ 
       }; 
   
       return transEndEventNames[transition]; 
   })(Modernizr.prefixed('transition')); 
   
   // then 
   jQuery("#main").one(transitionend, function(e) { 
       console.log("POUM!"); 
   }); 
   

참고 :

transitionend에 대한 하나의 변수를합니다 (아래 모더 나이저를 사용하고, 자신의 documentation에서 가져온 것입니다) 얻을 검출 어떤 종류를 사용

var fired = false; 
jQuery("#main").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
    if (! fired) { 
     fired = true; 
     console.log("POUM!"); 
    } 
}); 

Safari 6은 CSS에 설정된 내용에 대해 onload을 트리거하는 것처럼 보입니다. 그래서 당신이있는 경우,

#main { 
    width: 40px; 
    height: 40px; 
    transition: all 200ms; 
} 

(모든 접두사를 가정) Safari는 부하에 width 및 height으로 transitionend을 트리거합니다.이 문제를 해결받을 수있는 몇 가지 방법이 있습니다 :

• 를 사용하여보다 구체적인 전이 속성 (하지만 당신은 CSS에서, 여전히 게재 할 것을 설정 한 경우)

• 은 그것이 아니다 (자바 스크립트에서 다음을 수행 나는 "다시 한 번"transitionend "에 대한, 크롬 두 번 쏜, 문제점과 같은) fiddle

  var transitionProperty = 'background-color', 
      startColor = jQuery("#main").on(transitionend, function(e) { 
       var el = $(this); 
       if (transitionProperty === e.originalEvent.propertyName && el.css(transitionProperty) !== startColor) { 
        console.log("POUM!"); 
        // This is to make it only happen once. 
        $(this).off(transitionend); 
       } 
      }).css(transitionProperty); 
  

Answer 2

확실하지

그래, 여섯! Opera 11에서 transitionEnd 이벤트는 하나의 전환 종료 인 마다 두 번 발생했습니다. 오페라 12에서 transitionEnd 이벤트는 JavaScript 또는 jQuery를 통해 바인딩 할 때 번 6 번 발생합니다.

이것은 Opera 용이지만 동일한 문제가 적용된다고 가정합니다. 그것은 다음을 수행하여이 문제를 완화 할 수있는 말을 간다 : 당신이 잘못 아무것도하지 않는

$(document).bind("otransitionend", function(){ 
    $(this).unbind("otransitionend"); 
    alert("Transition Ended"); 
}); 

Answer 3

예쁜 것은, 그러나 그 가장자리 케이스의주의를 기울여야하고 여전히 크롬에서 작동 webkitTransitionEnd ". remyabel의 솔루션에서 영감을 얻음으로써, 나는 꽤 간단하게 끝 냈습니다. 그것은, otransitionend 트리거 oTransitionEnd 및 transitionend 때문에

jQuery("#main").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
$(this).off("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend"); 
    console.log("POUM!"); 
}); 

작동처럼 보이는