Skip to content

Instantly share code, notes, and snippets.

@O-Zone
Last active November 23, 2023 22:43
Show Gist options
  • Select an option

  • Save O-Zone/7230245 to your computer and use it in GitHub Desktop.

Select an option

Save O-Zone/7230245 to your computer and use it in GitHub Desktop.
Get the name of the browsers transitionEnd event. After calling this, window.transitionEnd will contain the browser specific name of the transitionEnd event. This is an extract of EvandroLG's transitionEnd snippet, without all support for testing different elements and using cache.
(function (window) {
var transitions = {
'transition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'otransitionend'
},
elem = document.createElement('div');
for(var t in transitions){
if(typeof elem.style[t] !== 'undefined'){
window.transitionEnd = transitions[t];
break;
}
}
})(window);
@O-Zone

O-Zone commented Oct 30, 2013

Copy link
Copy Markdown
Author

Known Bug: For some reason IE10 returns webkitTransitionEnd, which is wrong. I have no problem with that in my usecase (and am in a hurry), so I'll just leave it as is.

@O-Zone

O-Zone commented Oct 30, 2013

Copy link
Copy Markdown
Author

@lmignot

lmignot commented Jan 10, 2014

Copy link
Copy Markdown

Hi,
Great script! May I suggest the following changes?

  • Remove MSTransition:msTransitionEnd as IE10+ supports transitions without the prefix
  • Place transition first in the transitions map, if non-prefixed is supported it will break sooner...
(function (window) {
  var transitions = {
    'transition': 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'otransitionend'
  },
  elem = document.createElement('div');
 
  for(var t in transitions){
    if(elem.style[t] !== undefined){
      window.transitionEnd = transitions[t];
      break;
    }
  }
})(window);

@O-Zone

O-Zone commented Jan 16, 2014

Copy link
Copy Markdown
Author

Thanks @Imignot!
Both valid improvements - I have updated the gist! :-)

ghost commented Mar 18, 2014

Copy link
Copy Markdown

Perhaps also consider:

if (typeof elem.style[t] !== 'undefined') {
    ....

Just in case undefined was overwrote.

@O-Zone

O-Zone commented Apr 30, 2014

Copy link
Copy Markdown
Author

Thank you @ossreleasefeed - hereby updated! :)

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