Skip to content

Instantly share code, notes, and snippets.

@aamirafridi
Last active January 2, 2016 03:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aamirafridi/8242671 to your computer and use it in GitHub Desktop.
Save aamirafridi/8242671 to your computer and use it in GitHub Desktop.
Detecting CSS3 Transition support using Javascript. If supported than return the prefix and the eventName
//Working demo can be found on http://codepen.io/aamirafridi/pen/GcmHt
//HTML: <div>click me to animate</div>
function supportTransitions() {
var b = document.body || document.documentElement,
s = b.style,
p = 'transition',
e = {
'Webkit' : 'webkitTransitionEnd',
'Moz' : 'transitionend',
'O' : 'oTransitionEnd otransitionend',
'ms' : 'MSTransitionEnd',
'default': 'transitionend'
},
v = ['Moz', 'Webkit', 'O', 'ms'];
if(typeof s[p] == 'string') {
return {
prefix: p,
eventName: e['default']
};
}
p = p.charAt(0).toUpperCase() + p.substr(1);
// Tests for vendor specific prop
for(var i=0; i<v.length; i++) {
if(typeof s[v[i] + p] == 'string') {
return {
prefix: '-'+v[i].toLowerCase()+'-'+p.toLowerCase(),
eventName: e[v[i]]
};
}
}
return false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment