AddEventListener() transition end callback in different browsers

Question

Browsers have different transition end callbacks. So, I must create a addEventListener() to each.

addEventListener('transitionend', function() {
  // the same below
});

addEventListener('webkitTransitionEnd', function() {
  // the same above
});

But I don't like my code in this way. Why is not working when I write that way??:

addEventListener('transitionend webkitTransitionEnd', function() { });
  // thing
});

The above does not work on any browser. The first one works.

Is there any better way? Any suggestions?

If you take a look at the [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener?redirectlocale=en-US&redirectslug=DOM%2FEventTarget.addEventListener) function you will see that your code is not working, because the function is not defined this way. Your argument `'transitionend webkitTransitionEnd'` is only a string. If there were an overloaded function that would take an array like `target.addEventListener(["typ1", "type2"], listener);` you could pass an array of string. But there is none. — surfmuggle, Jan 05 '14 at 17:01
I just simplified and removed the element. Is that what you're talking about? — kratos, Jan 05 '14 at 17:04
I do not know what you mean by `I just simplified and removed the element`. To better understand your question i need more information. Why do you want to handle the different transitions with multiple eventListeners? What is it that you want to achieve? — surfmuggle, Jan 05 '14 at 17:07
I want a cross-browser transition end callback. Like I said "Browsers have different transition end callbacks. So, I must create a addEventListener() to each.". But my code is ugly that way. — kratos, Jan 05 '14 at 17:50
Do you mean [css3-transitions](http://www.w3.org/TR/css3-transitions/)? I do not understand what a cross browser style has to do with how you wire up the events in javascript. Also why not use something that is already offering a cross-browser solution or (maybe by using [a tool that generates vendor-prefixes](http://css3generator.com/)) ? — surfmuggle, Jan 05 '14 at 18:07
No! That's not what I'm talking about! I'm talking about JavaScript only. Different transition end callbacks: transitionend", "webkitTransitionEnd", "mozTransitionEnd"... — kratos, Jan 05 '14 at 18:29

adeneo · Answer 1 · 2014-01-05T17:04:33.657

2

addEventListener only takes one event, so you have to write them seperately. You could iterate over a list to make it at least look smaller

["transitionend", "webkitTransitionEnd", "mozTransitionEnd"].forEach(function(transition) {
     document.addEventListener(transition, handler, false);
});

function handler() {
    // thing
}

edited Jan 05 '14 at 17:04

answered Jan 05 '14 at 16:58

adeneo

312,895
29
395
388

AddEventListener() transition end callback in different browsers

1 Answers1