Reply To: Anyone running an older browser?

[Shikkediel]

Lemme wrap this up… yes, it’s usable. I have also found comparable snippets on the net with the same approach. Many with doubtful camelcasing for the constructor function as well as the event listeners though. You know there’s not a lot of info around when your Google search shows two meager results.

:-/

Firefox and MS are straightforward – presence of the TransitionEvent constructor object in windowmeans transition support. Then there’s the older Webkit related browser (Android as well), having their own prefixed constructor. So if the plain one isn’t there, we’ll see if the prefixed version is. Opera is a tricky one but Webkit compliance was introduced with 12.5 so easiest is to leave out the versions down to 10.5 where transition capability was introduced and not check for the O prefix.

Coming down to this:

var event = 'TransitionEvent',
listener = (function() {

  if (event in window) return 'transitionend';
  else if ('WebKit' + event in window) return 'webkitTransitionEnd';
})();

The variable listener will then have the string value of the appropriate transitionend event. And can be used like this:

element.addEventListener(listener, function() {

// Do something when transition ends

});

Shorthand code:

var event = 'TransitionEvent', listener = event in window ? 'transitionend' : 'WebKit' + event in window ? 'webkitTransitionEnd' : '';

My brother’s still running Opera 11 on an XP machine. Strangely enough the test page (unfortunately offline at the moment because of maintenance) did not return the expected result there. Another reason to not have incorporated that early browser here.

Besides the fact that the event was introduced as oTransitionEnd in 10.5 and changed into otransitionend in 11.6 (according to the Presto pages, not with 12 like the Mozilla doc states), only to get WebKit compliance in 12.5 and unprefixed support with 12.10. What a mess. Slightly unclear as well if the event constructor went from OTransitionEvent to oTransitionEvent…