Skip to content

Instantly share code, notes, and snippets.


depoulo/gist:9dc8f59d791ec8f8e40c Secret

Last active Sep 5, 2017
What would you like to do?
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: 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) {
foundTransitionEndEvent = event.type; // save the event that actually finishes in our closure variable
// must do this asynchronously; the transition is started on class *change*
window.setTimeout(function () {
}, 0);
// if foundTransitionEndEvent was not overwritten by out endtransition method, then we do not have any transitionEnd event
// and we default to all events

This comment has been minimized.

Copy link

@macgyver macgyver commented Feb 24, 2014

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


This comment has been minimized.

Copy link

@TobiasHennig TobiasHennig commented Sep 5, 2017

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