元素是否触发了任何事件来检查css3转换是否已开始或结束?
元素是否触发了任何事件来检查css3转换是否已开始或结束?
Answers:
CSS过渡的完成将生成一个相应的DOM事件。将为每个经历过渡的属性触发一个事件。这使内容开发人员可以执行与转换完成同步的操作。
要确定转换何时完成,请为在转换结束时发送的DOM事件设置一个JavaScript事件监听器函数。该事件是WebKitTransitionEvent的实例,其类型为
webkitTransitionEnd
。
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
转换完成时会触发一个事件。在Firefox中,事件是
transitionend
在Opera中,oTransitionEnd
在WebKit中是webkitTransitionEnd
。
有一种类型的过渡事件可用。该
oTransitionEnd
事件在转换完成时发生。
该
transitionend
事件在转换完成时发生。如果在完成之前删除过渡,则不会触发该事件。
更新资料
现在,所有现代浏览器都支持unprefixed事件:
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();
这对于其他事件用法也很好:)