Webkit의 전환 종료 이벤트는 webkitTransitionEnd, Firefox는 transitionEnd, Opera는 oTransitionEnd입니다. 순수 JS에서 모두를 다루는 좋은 방법은 무엇입니까? 브라우저 스니핑을해야합니까? 또는 각각을 개별적으로 구현 하시겠습니까? 나에게 발생하지 않은 다른 방법?
즉 :
//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";
element.addEventListener(transitionend, function(){
//do whatever
},false);
또는
// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);
function fn() {
//do whatever
}
답변
Modernizr에서 사용되는 기술이 개선되었습니다.
function transitionEndEventName () {
var i,
undefined,
el = document.createElement('div'),
transitions = {
'transition':'transitionend',
'OTransition':'otransitionend', // oTransitionEnd in very old Opera
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
for (i in transitions) {
if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
return transitions[i];
}
}
//TODO: throw 'TransitionEnd event is not supported in this browser';
}
그런 다음 전환 종료 이벤트가 필요할 때마다이 함수를 호출 할 수 있습니다.
var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);
답변
Matijs의 의견에 따르면 전환 이벤트를 감지하는 가장 쉬운 방법은이 경우 jquery 라이브러리를 사용하는 것입니다.
$("div").bind("webkitTransitionEnd.done oTransitionEnd.done otransitionend.done transitionend.done msTransitionEnd.done", function(){
// Unlisten called events by namespace,
// to prevent multiple event calls. (See comment)
// By the way, .done can be anything you like ;)
$(this).off('.done')
});
라이브러리가없는 자바 스크립트에서는 약간 장황합니다.
element.addEventListener('webkitTransitionEnd', callfunction, false);
element.addEventListener('oTransitionEnd', callfunction, false);
element.addEventListener('transitionend', callfunction, false);
element.addEventListener('msTransitionEnd', callfunction, false);
function callfunction() {
//do whatever
}
답변
최신 정보
다음은이를 수행하는 더 깨끗한 방법이며 모 더니 저가 필요하지 않습니다.
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
또는
var transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd otransitionend',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
}, transitionEnd = transEndEventNames[Modernizr.prefixed('transition')];
이것은 Modernizr에서 제안한 코드를 기반으로하지만 최신 버전의 Opera에 대한 추가 이벤트가 있습니다.
답변
jQuery 및 Bootstrap을 사용하는 경우 $.support.transition.end 하면 현재 브라우저에 맞는 이벤트를 반환합니다.
그것은되는 부트 스트랩에 정의 와에 사용되는 자사의 애니메이션 콜백 JQuery와 문서는 이러한 속성에 의존하지 말 불구하고 :
이러한 속성 중 일부는 아래에 설명되어 있지만 긴 지원 중단 / 제거주기가 적용되지 않으며 내부 jQuery 코드에서 더 이상 필요하지 않으면 제거 될 수 있습니다.
답변
2015 년부터이 한 줄짜리가 거래를 수행해야합니다 (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ 및 Opera 12 +) :-
var transEndEventName = ('WebkitTransition' in document.documentElement.style) ? 'webkitTransitionEnd' : 'transitionend'
이벤트 리스너를 연결하는 것은 간단합니다.
element.addEventListener(transEndEventName , theFunctionToInvoke);
답변
두 번째는 갈 길입니다. 이러한 이벤트 중 하나만 모든 브라우저에서 실행되므로 모든 이벤트를 설정할 수 있으며 작동합니다.
답변
더 깨끗한 방법이 있습니다.
function transitionEvent() {
// Create a fake element
var el = document.createElement("div");
if(el.style.OTransition) return "oTransitionEnd";
if(el.style.WebkitTransition) return "webkitTransitionEnd";
return "transitionend";
}
