Webkit transitionEnd event grouping

Question

I have a HTML element to which I have attached a webkitTransitionEnd event.

function transEnd(event) {
    alert( \"Finished transition!\" );

}

var node =         


        

Answer 1

Check the propertyName event:

function transEnd(event) {
    if (event.propertyName === "left") {
        alert( "Finished transition!" );
    }
}

var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );

That way, it will only fire when the "left" property is finished. This would probably work best if both properties are set to the same duration and delay. Also, this will work if you change only "left", or both, but not if you change only "top".

Alternatively, you could use some timer trickery:

var transEnd = function anon(event) {
    if (!anon.delay) {
        anon.delay = true;

        clearTimeout(anon.timer);
        anon.timer = setTimeout(function () {
            anon.delay = false;
        }, 100);

        alert( "Finished transition!" );
    }
};

var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );

This should ensure that your code will run at most 1 time every 100ms. You can change the setTimeout delay to suit your needs.