Question

我正在尝试读出元素的transition属性，但是，我只得到一个空字符串。正如我所见，该元素已应用了一个过渡。

我正在使用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

实际上，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;
}

Answer 2

问题不仅限于Firefox＆lt; = 23，而且还发生在Safari＆lt; 7 iOS＆lt; 7＆IE＆lt; = 11上，所以我创建了一个更通用的解决方案，它也支持转换延迟和多个逗号分隔的声明，如：

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

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

2 个答案: