Question

因为这会将转换持续时间设置为1秒： $('#objectID').css('webkit-transition-duration','1s');

我认为这会返回当前的持续时间值： $('#objectID').css('webkit-transition-duration');

但事实并非如此。

Answer 1

尝试：

$('#objectID').css('transition-duration','1s');

$('#objectID').css('transition-duration');

Answer 2

更简单的回答：

parseFloat(getComputedStyle(targetElement)['transitionDuration'])

Answer 3

function getTransitionProperty(element) {
  // Note that in some versions of IE9 it is critical that
  // msTransform appear in this list before MozTransform
  var properties = [
    'transition',
    'WebkitTransition',
    'msTransition',
    'MozTransition',
    'OTransition'
  ];
  var p;
  while (p = properties.shift()) {
    if (typeof element.style[p] != 'undefined') {
      return p;
    }
  }
  return false;
}

这将返回所有主要浏览器的转换值。

Answer 4

我知道这个答案可能为时已晚，但我只是将其整理出来：

function getTransitionDuration (el, with_delay){
var style=window.getComputedStyle(el),
    duration = style.webkitTransitionDuration,
    delay = style.webkitTransitionDelay; 

// fix miliseconds vs seconds
duration = (duration.indexOf("ms")>-1) ? parseFloat(duration) : parseFloat(duration)*1000;
delay = (delay.indexOf("ms")>-1) ? parseFloat(delay) : parseFloat(delay)*1000;


if(with_delay) return (duration + delay);
else return duration;
}

调用getTransitionDuration（el）将以ms为单位返回持续时间值。调用getTransitionDuration（el，true）将以ms为单位返回持续时间和延迟。

请注意，这只是webkit，您需要修复属性名称以匹配所有浏览器。

我也遇到了一个奇怪的错误，当100ms延迟在获得财产时被转换为100.00000149011612。

http://jsfiddle.net/z3bKD/2/

Answer 5

这是一个jQuery函数，它将以毫秒为单位返回传递给它的元素或选择器的转换持续时间：

function getTransitionDuration(elementOrSelector){
    var $el, durString, isMS, numberStr, numberNum;
    $el = $(elementOrSelector);
    if($el.length === 0 ){
        return false;
    }
    $el = $($el[0]); // Force just the first item.  need more?  use .each
    durString = $el.css('transition-duration').toLowerCase();
    isMS = durString.indexOf("ms") >= 0;
    numberStr = durString.match(/\d/);
    numberNum = parseInt(numberStr[0], 10);
    return isMS ? numberNum : numberNum * 1000;
};

这将仅返回包装集中第一个项目的持续时间，即使选择器与多个项目匹配也是如此。需要更多？在.each回调

中使用此功能

返回：

毫秒（int）
- 当元素或选择器与元素匹配时，AND具有转换持续时间。
0（int）
- 当元素或选择器与元素匹配时，AND没有转换持续时间或转换持续时间为0。
false（bool）
- 当元素或选择器不存在或不匹配时。

如何使用jQuery获取-webkit-transition-duration属性？

5 个答案: