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

Posted 2023-03-12

【中文标题】如何使用 jQuery 获取 -webkit-transition-duration 属性？

【英文标题】：How do I get the -webkit-transition-duration property with jQuery?

【发布时间】：2012-03-07 18:35:03

【问题描述】：

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

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

但事实并非如此。

【参考方案1】：

更简单的答案：

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

【讨论】：

我喜欢一个好的单线！当被问到这个问题时，standards (unprefixed) 属性几乎无法使用，但这些天你可能可以按原样回答这个问题。

【参考方案2】：

尝试：

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

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

【讨论】：

确实回答了 OPs 问题，但在 webkit 浏览器中只返回“1s”。

我明白了，它让我对设置变得懒惰，但对获取却没有。看起来需要破折号才能获取。

【参考方案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;

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

【讨论】：

谢谢，不过我正在寻找-webkit-transition-duration。是否包含在转换中？我可以将 jQuery 元素传递给这个函数吗？抱歉，对此很陌生。

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

【参考方案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 时。

假（布尔）

当元素或选择器不存在或不匹配任何元素时。

【讨论】：

这很好，但是如果您在几秒钟内使用转换，作为浮点数，如果小于 1，它将返回 0，例如 0.4s 返回 0，我会更新您的正则表达式以匹配数字所以它可以处理浮点数：/\d+(\.\d+)?/g

【参考方案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/

【讨论】：

100 vs 100.00000149011612 是由精度误差引起的。 javascript 使用双浮点数来表示数字，当您将字符串解析为浮点数时，会引入一点错误。您可以改用 parseInt 来确保整数。