我需要一个类似于transitionend
的特殊事件,在所有过渡效果完成后仅触发一次,或者如果在CSS中没有定义任何过渡效果,则立即触发。
这是我迄今为止想到的:
(function($){
$.event.special.transitionsComplete = {
setup: function(data, namespaces, eventHandle){
var queue = [],
style = window.getComputedStyle(this, null),
computedProps = style.getPropertyValue('transition-property').split(', '),
computedDurations = style.getPropertyValue('transition-duration').split(', '),
$node = $(this);
// only count properties with duration higher than 0s
for(var i = 0; i < computedDurations.length; i++)
if(computedDurations[i] !== '0s')
queue.push(computedProps[i]);
// there are transitions
if(queue.length > 0){
$node.on('webkitTransitionEnd.x transitionend.x', function(e){
queue.splice(queue.indexOf(e.originalEvent.propertyName));
if(queue.length < 1)
$node.trigger('transitionsComplete');
});
// no transitions, fire (almost) immediately
}else{
setTimeout(function(){
$node.trigger('transitionsComplete');
}, 5);
}
},
teardown: function(namespaces){
$(this).off('.x');
}
};
})(jQuery);
我在这里创建了一个实时示例。
唯一的问题是,它仅在元素本身具有过渡属性时起作用,忽略来自子元素的过渡。如果我将transitionsComplete
切换到transitionend
,则在子过渡完成后,父级和子级事件处理程序都会运行。是否有某种方法或更好的方法来确定元素或其子项是否存在过渡?如果可能,我想避免手动查看其过渡属性并检查其子代。 (无论如何,这也不可靠,因为即使某些子元素有过渡效果,也不意味着它们在那一点上是活动的)