3

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

我正在使用 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');
        }
    };
}
4

2 回答 2

4

实际上这很奇怪，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;
}
于 2013-10-04T20:09:57.363 回答
0

该问题不仅限于 Firefox<=23，还发生在 Safari<7 iOS<7 和 IE<=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);
于 2014-01-15T14:19:53.523 回答