css3 전환이 시작 또는 종료되었는지 확인하기 위해 요소에 의해 발생 된 이벤트가 있습니까?
css3 전환이 시작 또는 종료되었는지 확인하기 위해 요소에 의해 발생 된 이벤트가 있습니까?
답변:
CSS 전환이 완료되면 해당 DOM 이벤트가 생성됩니다. 전환이 진행되는 각 속성에 대해 이벤트가 시작됩니다. 이를 통해 컨텐츠 개발자는 전환 완료와 동기화되는 조치를 수행 할 수 있습니다.
전환이 완료되는 시점을 확인하려면 전환이 끝날 때 전송되는 DOM 이벤트에 대한 JavaScript 이벤트 리스너 기능을 설정하십시오. 이벤트는 WebKitTransitionEvent의 인스턴스이며 유형은
webkitTransitionEnd
입니다.
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
전환이 완료되면 시작되는 단일 이벤트가 있습니다. Firefox에서 이벤트는
transitionend
Opera,oTransitionEnd
WebKit에서입니다webkitTransitionEnd
.
사용 가능한 전환 이벤트에는 한 가지 유형이 있습니다.
oTransitionEnd
이벤트는 전환이 완료 될 때 발생합니다.
transitionend
이벤트는 전환이 완료 될 때 발생합니다. 완료 전에 전환이 제거되면 이벤트가 시작되지 않습니다.
최신 정보
모든 최신 브라우저는 이제 접두사가없는 이벤트를 지원합니다.
element.addEventListener('transitionend', callback, false);
https://caniuse.com/#feat=css-transitions
Pete가 제공 한 접근 방식을 사용하고 있었지만 이제는 다음을 사용하기 시작했습니다.
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
또는 부트 스트랩을 사용하면 간단하게 수행 할 수 있습니다
$(".myClass").one($.support.transition.end,
function() {
//do something
});
이것은 bootstrap.js에 다음을 포함하고 있기 때문에
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'transition' : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
$(function () {
$.support.transition = transitionEnd()
})
}(jQuery);
콜백이 항상 발생하도록하는 emulateTransitionEnd 함수도 포함되어 있습니다.
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
속성이 변경되지 않거나 페인트가 트리거되지 않는 경우에이 이벤트가 발생하지 않는 경우가 있습니다. 항상 콜백을 받도록 이벤트를 수동으로 트리거하는 시간 초과를 설정해 보겠습니다.
Opera 12에서 일반 JavaScript를 사용하여 바인딩하면 'oTransitionEnd'가 작동합니다.
document.addEventListener("oTransitionEnd", function(){
alert("Transition Ended");
});
그러나 jQuery를 통해 바인딩하는 경우 'otransitionend'를 사용해야합니다.
$(document).bind("otransitionend", function(){
alert("Transition Ended");
});
Modernizr 또는 bootstrap-transition.js를 사용하는 경우 간단히 변경하면됩니다.
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/ 에서 일부 정보를 찾을 수 있습니다 .
그냥 재미로하지 마세요!
$.fn.transitiondone = function () {
return this.each(function () {
var $this = $(this);
setTimeout(function () {
$this.trigger('transitiondone');
}, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
});
};
$('div').on('mousedown', function (e) {
$(this).addClass('bounce').transitiondone();
});
$('div').on('transitiondone', function () {
$(this).removeClass('bounce');
});
JS 프레임 워크를 사용하지 않고 단일 전환 끝 만 감지하려면 다음과 같은 편리한 유틸리티 기능을 사용하십시오.
function once = function(object,event,callback){
var handle={};
var eventNames=event.split(" ");
var cbWrapper=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
callback.apply(this,arguments);
};
eventNames.forEach(function(e){
object.addEventListener(e,cbWrapper,false);
});
handle.cancel=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
};
return handle;
};
용법:
var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
//do something
});
그런 다음 어느 시점에서 취소하려면 여전히
handler.cancel();
다른 이벤트 용도에도 좋습니다 :)