Transitionend event name detection

[csimi]

This should be fine or you can make your own version based on it. I've tried to keep the code as DRY as possible. Warning: based on the MDN docs this is very likely to fail on Safari >= 3.0 && < 3.2. I believe only browser sniffing trickery is the only way to avoid this, which should be redundant considering the market share of those versions.

About the event names:

• transitionEnd doesn't exist
• there is no MSTransitionEnd or even if there is, IE supports the w3c name
• opera has 2 differently cased event names

Adding the proper event name to $.support would need a Deferred object and be relatively useless.

Thanks.

References used:

• https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend
• https://developer.mozilla.org/en-US/docs/Web/CSS/transition
• http://msdn.microsoft.com/en-us/library/ie/hh673535%28v=vs.85%29.aspx

[atotic]

I just ran into transitonEnd naming problem. If transitionEnd was enabled, events were not firing on Chrome, iOS. This patch fixes it.

[klebba]

Sheesh -- I assumed a CSS3 transition library would get this right and wasted a lot of time before I found this ticket. Thanks!

[albell]

Good call. Yeah, It's amazing how everyone seems to get this wrong, modernizr very much included. There is no MSTransitionEnd! It was unprefixed during development of IE10. Still, I find this structure needlessly difficult to follow. Why not test once during init to determine the event name to use ( with a preference for the unprefixed), and give it a clear variable name? This works, but mixing up the testing in the callback code spreads out things that could easily all be in one place...

[csimi]

When further researching this issue I read http://coding.smashingmagazine.com/2013/04/26/css3-transitions-thank-god-specification/#a8 which made me think feature detection on init might not work with IE10 opening tabs in the background by default. It also made more sense at the time with the async nature of events. Though I might just be too paranoid?

[cbou]

I think the fallback is never called:

      if ((i > 0) && ($.transit.useTransitionEnd)) {
        // Use the 'transitionend' event if it's available.
      } else {
        // Fallback to timers if the 'transitionend' event isn't supported.
        window.setTimeout(cb, i);
      }

You remove the test of transitionEnd and never update $.transit.useTransitionEnd.

[csimi]

$.transit.useTransitionEnd seems to be a static setting you can edit in the source. As far as I can see it doesn't need to be updated.

[cbou]

How do you detect if the transitionend event is not supported? e.g. IE8 will never get the callback fired.

edit: I remove the test because it was wrong.

[csimi]

Transit doesn't animate at all in IE8 or browsers that don't support transitions, you have to alias it to $.fn.animate, so checking if it supports the transitionend event would be redundant.

[cbou]

You can also let IE8 without any transition for this case a callback would be nice...