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

If you prefer it in JQuery, try this out. Note there is an event param to store the event object and use within the corresponding function.

$("#divId").bind('oTransitionEnd transitionEnd webkitTransitionEnd', event, function() { 
    alert(event.propertyName) 
});

Answer 2

If you are using webkit I assume you are mobilizing a web-application for cross platform access.

If so have you considered abstracting the cross platform access at the web-app presentation layer ?

Webkit does not provide native look-and-feel on mobile devices but this is where a new technology can help.

Answer 3

from my point of view the expected behaviour of the code would be to

• trigger an alert only when the last transition has completed
• support transitions on any property
• support 1, 2, many transitions seamlessly

Lately I've been working on something similar for a page transition manager driven by CSS timings.

This is the idea

// Returs the computed value of a CSS property on a DOM element
// el: DOM element
// styleName: CSS property name
function getStyleValue(el, styleName) {
    // Not cross browser!
    return window.getComputedStyle(el, null).getPropertyValue(styleName);    
}

// The DOM element
var el = document.getElementById('el');

// Applies the transition
el.className = 'transition';

// Retrieves the number of transitions applied to the element
var transitionProperties = getStyleValue(el, '-webkit-transition-property');
var transitionCount = transitionProperties.split(',').length;

// Listener for the transitionEnd event
function eventListener(e) {
    if (--transitionCount === 0) {
        alert('Transition ended!');
        el.removeEventListener('webkitTransitionEnd', eventListener);
    }
}

el.addEventListener('webkitTransitionEnd', eventListener, false);

You can test here this implementation or the (easier) jQuery version, both working on Webkit only

Answer 4

just remove the event:

var transEnd = function(event) {
   event.target.removeEventListener("webkitTransitionEnd",transEnd);
};

it will fire for the first property and not for the others.

Answer 5

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.