无法在 Firefox 中使用 jquery 获取 CSS 转换属性

Question

我试图读出一个元素的转换属性，但是，我只得到一个空字符串。如我所见，该元素应用了一个过渡。

我正在使用 jQuery 的 .css() 来实现这一点。比如下面的代码

// in css
#transitionElement {
    transition: height 0.5s ease;
}

// and in JS
$('#transitionElement').height('59px');
console.log($('#transitionElement').css('transition'));
console.log($('#transitionElement').css('-moz-transition'));

触发转换，我可以看到，但记录 2x (empty string)。

在 Chromium 中，.css('transition') 工作得很好。

任何想法如何在 Firefox 中进行这项工作？

编辑：

似乎您无法在 Firefox 中将整个转换读出为字符串（如 jimmyweb 所指出的）。带着一个 cssHook 来帮助自己。不知道其他浏览器也许我可以测试一下。

if($.browser.mozilla) {
    $.cssHooks[ "transition" ] = {
        get: function( elem, computed, extra ) {
            return $.css(elem, 'transition-duration')
                 + ' ' + $.css(elem, 'transition-property')
                 + ' ' + $.css(elem, 'transition-timing-function');
        }
    };
}

Answer 1

问题不仅限于 Firefox

transition: transform 1500ms cubic-bezier(0,0.6,1) 1s, left 500ms;

这是我的 jQuery 插件和辅助函数：

/**
 * PROBLEM: FF<=23, IE<=11 and Safari<7 return empty strings on 
 *   $elm.css('-prefix-transition').
 * SOLUTION: Retrieve transition properties separately and compose full version.
 *
 * See answer at http://stackoverflow.com/a/21139827/328272.
 */
jQuery.fn.getTransitionStyle = function(transitionPrefixed) {
  var $elm = this;

  if ($elm.css(transitionPrefixed)) return $elm.css(transitionPrefixed);

  // Transition properties to iterate through.
  var properties = 'property duration timing-function delay'.split(' '),
    result = [], valueArray, i, j;

  // Iterate through transition properties.
  for (i = 0; i < properties.length; i++) {
    // Get property value and split by comma.
    valueArray = $.css($elm[0], transitionPrefixed + '-' + properties[i]).splitCssStyleByComma();

    // Iterate through 
    for (j = 0; j < valueArray.length; j++) {
      // Add value to return array.
      result[j] = (result[j] ? result[j] + ' ' : '') + valueArray[j];
    }
  }
alert(result.join(', '));
  return result.join(', ');
};

/**
 * Split CSS style by commas while ignoring commas between parenthesis.
 * Example:
 * Input string: "transform 1500ms cubic-bezier(0,0.6,1), left 500ms"
 * Output array: ["transform 1500ms cubic-bezier(0,0.6,1)", "left 500ms"]
 */
(function() {
  var regExpString = '\\s*(' + '([^,(]+(\\(.+?\\))?)+' + ')[\\s,]*',
    regExpMain = new RegExp(regExpString),
    regExpValidate = new RegExp('^(' + regExpString + ')+$'),
    string, result;

  String.prototype.splitCssStyleByComma = function() {
    string = this, result = [];

    // DEBUG: Validate value to prevent an infinite loop.
    if (!string.match(regExpValidate)) {
      console.log('ERROR: Cannot split CSS style by comma: "' + string + '"');
      return false;
    }

    // As long as there is a string left, chop off the parts we desire.
    while (string.match(regExpMain)) {
      // Add value to return array.
      result.push(RegExp.$1);

      // Remove value from string.
      string = string.replace(regExpMain, '');
    }

    return result;
  };
})();

按以下方式使用插件。我使用Modernizr.prefixed() 来查找过渡样式名称的可选前缀版本，但任何其他方法当然都可以：

var transitionNamePrefixed = Modernizr.prefixed('transition');
var transitionStyle = $('.element').getTransitionStyle(transitionNamePrefixed);

Answer 2

实际上transition 属性为空这很奇怪，但transition 包含的其他属性是可访问的，因此您可以连接整个transition 值。您也可以使用 getComputedStyle 方法获取 CSS 属性值。你的控制台应该打印出除了第一个属性和延迟值（如果你不提供它）之外的所有属性，它是空字符串：

var element = document.getElementById('transitionElement'),
    style = window.getComputedStyle(element);
    console.log(style.getPropertyValue('transition'));
    console.log(style.getPropertyValue('transition-delay'));
    console.log(style.getPropertyValue('transition-duration'));
    console.log(style.getPropertyValue('transition-property'));
    console.log(style.getPropertyValue('transition-timing-function'));

还要记住为旧版本提供供应商前缀：

#transitionElement {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}