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

Question

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

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

但事实并非如此。

Answer 1

更简单的答案：

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

Answer 2

尝试：

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

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

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

这是一个 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)
  • 当元素或选择器与元素匹配并且具有过渡持续时间时。
• 0（整数）
  • 当元素或选择器匹配一个元素并且没有转换持续时间或转换持续时间为 0 时。
• 假（布尔）
  • 当元素或选择器不存在或不匹配任何元素时。

Answer 5

我知道这个答案可能来得太晚了，但我只是把它整理出来：

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) 将以毫秒为单位返回持续时间值。调用 getTransitionDuration(el, true) 将以毫秒为单位返回持续时间和延迟。

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

我也遇到了一个奇怪的错误，当 100 毫秒延迟在获取属性时转换为 100.00000149011612 之类的东西。

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