Skip to content

Instantly share code, notes, and snippets.

@jonraasch
Created April 21, 2010 14:32
Show Gist options
  • Save jonraasch/373874 to your computer and use it in GitHub Desktop.
Save jonraasch/373874 to your computer and use it in GitHub Desktop.
Extends the jQuery.support object to CSS3 transition
// jQuery.support.transition
// to verify that CSS3 transition is supported (or any of its browser-specific implementations)
$.support.transition = (function(){
var thisBody = document.body || document.documentElement,
thisStyle = thisBody.style,
support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
return support;
})();
@briznad
Copy link

briznad commented May 12, 2010

works like a charm. Thanks!

@marioestrada
Copy link

I would put thisStyle.transition !== undefined it is the actual property from the standard and once browsers start supporting it the call would be a little bit faster.

@jonraasch
Copy link
Author

Just reordered the transitions per marioestrada's comment, and added a browser extension for IE (MsTransition)

@maluke
Copy link

maluke commented Dec 14, 2011

Why not (thisStyle.transition || thisStyle.WebkitTransition || thisStyle.MozTransition || thisStyle.MsTransition || thisStyle.OTransition) !== undefined;?

@bpierre
Copy link

bpierre commented Dec 21, 2011

@maluke because the default value ("") is falsy.

@maluke
Copy link

maluke commented Dec 21, 2011

Ah, I see.

@fbm351
Copy link

fbm351 commented Feb 27, 2013

Receiving Uncaught TypeError: Cannot read property 'webkit' of undefined on pages with this transition being used.

/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */

$.support.transition = (function () {
  var thisBody = document.body || document.documentElement
    , thisStyle = thisBody.style
    , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined

  return support && {
    end: (function () {
      var transitionEnd = "TransitionEnd"
      if ( $.browser.webkit ) {

Uncaught TypeError: Cannot read property 'webkit' of undefined
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
return transitionEnd
}())
}
})()

})

@rtpHarry
Copy link

The error is likely because jQuery 1.9 has remove support for $.browser

@msshohan
Copy link

I am getting the TypeError error in the console
TypeError: can't convert undefined to object

Is there any workaround for that?

@ltujiba
Copy link

ltujiba commented Sep 11, 2019

I am getting the TypeError error in the console
TypeError: can't convert undefined to object

Is there any workaround for that?

Me too, does this has something to do with the jquery version ?

@msshohan
Copy link

msshohan commented Oct 7, 2019

Not sure if that’s the case. I tried to change the version to 1.9 and the latest version from 1.12 but it didn't help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment