2

我正在实现一个出色的解决方案（在此处找到）在使用 CSS 转换时使用一个回调函数（如 jQuery ）。

问题是，如果我使用供应商前缀，Chrome 至少会绑定两个事件：一个用于webkitTransitionEnd，第二个用于transitionend，当然，会触发两次回调。这是我的一段代码：

jQuery("#main").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
  console.log("POUM!");
});

难道我做错了什么？

4

3 回答 3

6

你没有做错什么。Chrome 只使用带前缀和不带前缀的版本。

有几个选项：

  1. 使用外部变量。

    var fired = false;
jQuery("#main").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    if ( ! fired ) {
        fired = true;
        console.log("POUM!");
    }
});

  2. 使用某种检测来获取transitionend的单个变量（以下使用Modernizr，取自他们的文档）：

    var transitionend = (function(transition) {
     var transEndEventNames = {
         'WebkitTransition' : 'webkitTransitionEnd',// Saf 6, Android Browser
         'MozTransition'    : 'transitionend',      // only for FF < 15
         'transition'       : 'transitionend'       // IE10, Opera, Chrome, FF 15+, Saf 7+
    };

    return transEndEventNames[transition];
})(Modernizr.prefixed('transition'));

// then
jQuery("#main").one(transitionend, function(e) {
    console.log("POUM!");
});

笔记：

Safari 6 似乎会触发onloadCSS 中设置的任何内容。所以，如果你有（假设所有前缀）

#main {
    width: 40px;
    height: 40px;
    transition: all 200ms;
}

Safari 将触发transitionend加载width和height加载。有几种方法可以解决这个问题：

  • 使用更具体的过渡属性（但如果你在 CSS 中设置它，它仍然会触发）

  • 在 javascript 中执行以下操作（这不是最漂亮的事情，但它应该处理这种边缘情况并且它仍然可以在 Chrome 中工作）小提琴

    var transitionProperty = 'background-color',
    startColor = jQuery("#main").on(transitionend, function(e) {
        var el = $(this);
        if ( transitionProperty === e.originalEvent.propertyName && el.css(transitionProperty) !== startColor ) {
            console.log("POUM!");
            // This is to make it only happen once.
            $(this).off(transitionend);
        }
    }).css(transitionProperty);
于 2013-08-07T14:58:32.450 回答
2

我遇到了同样的问题，Chrome 触发了两次，一次用于“transitionend”，另一次用于“webkitTransitionEnd”。从 remyabel 的解决方案中得到灵感，我最终得到了一些相当简单的东西。

jQuery("#main").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
$(this).off("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd    transitionend");
  console.log("POUM!");
});
于 2013-11-25T19:09:36.317 回答
1

不确定这是否解决了您的问题，但来自此链接：http: //ianlunn.co.uk/articles/opera-12-otransitionend-bugs-and-workarounds/

它引用说：

是的，六个！在 Opera 11 中，transitionEnd 事件会在每个过渡结束时触发两次。在 Opera 12 中，transitionEnd 事件将触发六次，无论是通过 JavaScript 还是 jQuery 绑定。

这适用于 Opera，但我假设同样的问题也适用于您。然后它说您可以通过执行以下操作来缓解此问题：

$(document).bind("otransitionend", function(){
    $(this).unbind("otransitionend");
    alert("Transition Ended");
});
于 2013-08-07T14:54:21.937 回答