Skip to content

Instantly share code, notes, and snippets.

@depoulo
Last active September 5, 2017 08:04
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save depoulo/9dc8f59d791ec8f8e40c to your computer and use it in GitHub Desktop.
The standard version of detecting the correct transitionEnd event fails on the Galaxy S3 mini, which is why I came up with this ugly workaround. See discussion here: http://davidwalsh.name/css-animation-callback Requires a jQuery-like DOM lib in this version.
// detect transitionEnd event (takes up to 2 ms)
var possibleTransitionEndEvents = 'webkitTransitionEnd MozTransitionEnd oTransitionEnd transitionend';
var foundTransitionEndEvent = possibleTransitionEndEvents; // gets replaced by the real one or false
var style = $('<style>test{position:absolute;left:-999px}test.transition{color:red}</style>').appendTo('head');
var testElement = $('<test></test>')
.css('transition', 'all 1ms linear')
.one(possibleTransitionEndEvents, function (event) {
$(event.currentTarget).remove();
style.remove();
foundTransitionEndEvent = event.type; // save the event that actually finishes in our closure variable
})
.appendTo('body');
// must do this asynchronously; the transition is started on class *change*
window.setTimeout(function () {
testElement.addClass('transition');
}, 0);
// if foundTransitionEndEvent was not overwritten by out endtransition method, then we do not have any transitionEnd event
// and we default to all events
@macgyver
Copy link

What's the harm in just using all events from the start, are any browsers known to send more than one event?

@TobiasHennig
Copy link

We use the script from David Walsh but changed the order, so WebkitTransition comes before transition. Works on Samsung S3!

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