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

Question

这段代码将过渡时间设置为1秒：

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

我原以为以下代码可以返回当前的过渡时间值：

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

但实际上它并不能。

- narrowdesign

Answer 1

更简单的回答：

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

- Afshin Mehrabani

---

我喜欢简洁明了的代码！当这个问题被提出时，标准（未加前缀）属性几乎无法使用，但现在你可以直接使用这个答案。 - Ryan Ore

Answer 2

尝试使用以下代码：

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

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

- Nicocube

---

回答了OP的问题，但在Webkit浏览器中只返回“1s”。 - max

我明白了，它让我在设置方面变得懒惰，但在获取方面却不行。看起来需要使用破折号来获取。 - narrowdesign

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

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

- Ohgodwhy

---

谢谢，我正在寻找“-webkit-transition-duration”。它是否包含在transform中？我可以将jQuery元素传递给此函数吗？抱歉，我对此还很陌生。 - narrowdesign

这个想法是，'element' 代表您想获取属性的元素。如果您使用 $("#myElement")，那么您只需要将其声明为 element = $("#myElement");，它就会返回过渡效果。抱歉打破你的幻想，但持续时间包含在过渡属性中，因此您必须解析属性并从中获取秒数作为数组。您可以在空格上拆分字符串并迭代值以获取延迟时间（以秒为单位）。 - Ohgodwhy

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 (int) - 当元素或选择器匹配一个没有过渡持续时间或过渡持续时间为0的元素时。 - false (bool) - 当元素或选择器不存在或匹配不到元素时。

- Arron

---

这很好，但如果您使用秒作为浮点数的过渡时间，并且小于1，则会返回0，例如0.4秒返回0。建议更新正则表达式以匹配数字，以便可以处理浮点数：/\d+(\.\d+)?/g。 - Shannon Hochkins

Answer 5

我知道这个回答可能太晚了，但我刚刚整理好：

这句话是关于 IT 技术的。

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，您需要修复属性名称以匹配所有浏览器。

我也遇到了一个奇怪的 bug，当 100 毫秒的延迟被转换为类似于 100.00000149011612 的值时，获取属性。 http://jsfiddle.net/z3bKD/2/

- nxtwrld

---

100与100.00000149011612之间的差异是由于精度误差引起的。JavaScript使用双精度浮点数来表示数字，当您将字符串解析为浮点数时，会引入一些误差。您可以使用parseInt来确保整数。 - Greg Tatum