jquery - 限制/控制CSS Transitionend调用

我想进行颜色淡入，并在完成时运行一次功能。我可以使用bind来做到这一点，它在transitionend上运行回调。这是可行的，但是对于绑定到元素的每个过渡都将运行。

的CSS

多个转换：输出：(2) called

 box-shadow: 2px 2px 5px red !important;
 transition: all 2s ease-out ;

单次转换：输出：called

 transition: background-color 2s ease-out !important;
 background: red !important;

jQuery的：

    $("#currentBlock").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(event){
                log("called");
                $(this).unbind(event);
            });

我想对盒形阴影应用过渡效果，但是它两次调用transitionend而不是一次。如何限制回调的调用时间，或者如果再次调用，则取消回调。

最佳答案

多个触发的transitionend-events可能有两个原因：


正如克里斯托弗·怀特（Christopher White）在回答中所说：有些浏览器支持多个以上的transitionend事件，因此所有的浏览器都会被触发，因为您将它们全部绑定在一起。 --->让jQuery检查无前缀或前缀版本，并仅绑定jQuery返回的结果。
对于每个过渡属性，都会触发一个transitionend-event。因此，过渡盒阴影和背景会导致两个事件。 --->在事件对象内查找导致事件的属性的名称。然后，您可以使用if语句决定要做什么。

$('body').css('transition'); // this initializes the check for vendor-prefixed transitions
console.log($.cssProps.transition); // in jQuery.cssProps you find the result
$("#currentBlock").bind($.cssProps.transition + 'end', function(evt) {
    // jQuery wraps the original event in an own object so we retrieve it from there
    var prop = evt.originalEvent.propertyName; // in the original you find the property
    console.log(prop);
    // now you can for a specific transitionend decide what shall happen
    if (prop == 'box-shadow') { // note the properties are dashed here
        console.log('boxShadow has finished.');
    }
    // if you want to unbind the handler argument is the event-name, not the event-object
    $(this).unbind($.cssProps.transition + 'end');
});

顺便说一句：如果您使用的是jQuery的较新版本，请使用.on() / .off()而不是.bind() / unbind()。