11

Since this sets the transition duration to 1 second: $('#objectID').css('webkit-transition-duration','1s');

I assumed this would return the current duration value: $('#objectID').css('webkit-transition-duration');

but it does not.

narrowdesign
  • 195
  • 1
  • 2
  • 8

5 Answers5

17

Simpler answer:

parseFloat(getComputedStyle(targetElement)['transitionDuration'])
Afshin Mehrabani
  • 33,262
  • 29
  • 136
  • 201
  • 1
    I love a good one-liner! When this question was asked, the standards (unprefixed) property was almost unusable, but these days you can probably get away with this answer as is. – Ryan Ore Dec 04 '15 at 19:44
15

Try with:

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

$('#objectID').css('transition-duration');
Guido Bouman
  • 3,155
  • 4
  • 22
  • 33
Nicocube
  • 2,962
  • 2
  • 20
  • 28
6

Here is a jQuery function that will return, in milliseconds, the transition duration of either an element or a selector passed to it:

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

This will only return the duration of the first item in the wrapped set, even if the selector matches more than one item. Need more? use this in a .each callback

Returns:

  • Milliseconds (int)
    • When the element or selector matches an element AND has a transition duration.
  • 0 (int)
    • When the element or selector matches an element AND has either no transition duration or a transition duration of 0.
  • false (bool)
    • When the element or selector either doesn't exist or matches no elements.
castis
  • 8,154
  • 4
  • 41
  • 63
Arron
  • 767
  • 8
  • 11
  • 4
    This is good, however if you use a transition in seconds, as a float it will return 0 if less than 1, example 0.4s returns 0, I would update your regular expression to match the number so that it can handle floats: `/\d+(\.\d+)?/g` – Shannon Hochkins Jun 07 '16 at 04:09
6
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;
}

This will return the transition value for all major browsers.

R4wizard
  • 69
  • 8
Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • Thanks, I'm looking for the `-webkit-transition-duration` though. Is that included in transform? Can I pass a jQuery element to this function? Sorry, pretty new to this. – narrowdesign Mar 07 '12 at 18:58
  • The idea is that 'element' represents the element that you want to get the properties of. If you use $("#myElement"), then you simply need to put that to declare element = $("#myElement"); and it will return the transition. Sorry to burst your bubble but the duration is inclucded in the transition property, so you have to parse the property and take the seconds from it as an array. you can split the string on whitespace and iterate the values to get the delay in seconds. – Ohgodwhy Mar 07 '12 at 19:05
3

I know this answer comes probably too late, but I was just sorting it out:

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

Calling getTransitionDuration(el) will return duration value in ms. Calling getTransitionDuration(el, true) will return duration and delay in ms.

Note that this is webkit only, you would need a fix for the property name to match all the browsers.

I am also experiencing a weird bug, when 100ms delay gets converted to something like 100.00000149011612 when getting the property.

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

nxtwrld
  • 1,942
  • 14
  • 15
  • The 100 vs 100.00000149011612 is caused by precision error. JavaScript uses double floats to represent numbers, and when you're parsing the string to a float a little bit of error is introduced. You could use parseInt instead to ensure an integer. – Greg Tatum Mar 04 '14 at 16:13