javascript - 在 CSS 转换中启用 vendor 前缀会使回调触发两次

Question

我正在实现一个出色的解决方案(发现 here )，以便在使用 CSS 转换时使用回调函数a la jQuery。

问题是，如果我使用 vendor 前缀，Chrome 至少会绑定(bind)两个事件:一个用于 webkitTransitionEnd，第二个用于 transitionend，当然，还会触发回调两次。这是我的代码:

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

我做错了什么吗？

Answer 1

你没有做错任何事。 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，并取自其 documentation ):

   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 似乎会触发 CSS 中设置的任何内容的 onload。所以，如果你有(假设所有前缀)

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

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

• 使用更具体的转换属性(但如果您在 CSS 中设置它，它仍然会触发)

• 在 javascript 中执行以下操作(这不是最漂亮的事情，但它应该照顾到这种边缘情况，并且在 Chrome 中仍然有效)fiddle

  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);