1

I want to create a custom event that handles all the different vendor-prefixed versions of the transitionend event (i.e., webkitTransitionEnd, mozTransitionEnd, msTransitionEnd, oTransitionEnd and the W3C transitionend event).

Ideally, I'd like to be able to use the custom transitionend event I want to create as follows:

elem.addEventListener('myTransitionEnd', function (evt) {
  // Called whenever any transitionend event fires.
});

Unfortunately, I have no clue how to do this. I was looking into document.createEvent, but I couldn't figure out how to use document.createEvent with initEvent and dispatchEvent to actually get my custom transitionend event to fire when any applicable transitionend event fires for some arbitrary DOM elements that I set up with my custom event at a later time.

Any help with the code would be greatly appreciate.
In addition, if there is a better approach to this problem than creating a custom event, please let me know.
In the end, I really just want to have a solution that is as modular as possible (and I was hoping to learn a thing or two about custom events in JS while I'm at it).

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
HartleySan
  • 7,404
  • 14
  • 66
  • 119
  • http://stackoverflow.com/questions/5023514/how-do-i-normalize-css3-transition-functions-across-browsers – almog.ori Oct 29 '13 at 13:14

1 Answers1

1

An easy way to do this would be creating a global variable (string) with all transitionend events in it. And then add a eventlistener to that string. Example:

//your global var:
window.endTransition = 'webkitTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd transitionend';

//your event
elem.addEventListener(window.endTransition, function(e){
    //your awesome piece of JS
});
Luuuud
  • 4,206
  • 2
  • 25
  • 34
  • Ah, cool. I didn't know that could be done. That may in fact be the easiest/best solution, but before I mark it as the correct answer, I would like to know how to go the custom event route as well, just for the sake of learning. – HartleySan Oct 29 '13 at 13:20
  • 1
    This is a good solution. Thank you. I actually ended up going with the Modernizr way of doing things though, which is noted in the link in the comment to my question. I went that route because I was concerned about some edge cases where more than one event might fire when you set up an event handler for all the different versions of transitionend. Thanks again, though. – HartleySan Oct 30 '13 at 14:58
  • Modernizr is indeed a better solution for more complicated applications. My solution is pretty much the easiest way to go. – Luuuud Oct 30 '13 at 17:36