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 = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );

Then I proceed to change its CSS left and top properties like:

node.style.left = '400px';
node.style.top = '400px';

This causes the DIV to move smoothly to the new position. But, when it finishes, 2 alert boxes show up, while I was expecting just one at the end of the animation. When I changed just the CSS left property, I get one alert box - so this means that the two changes to the style are being registered as two separate events. I want to specify them as one event, how do I do that?

I can't use a CSS class to apply both the styles at the same time because the left and top CSS properties are variables which I will only know at run time.

Answer 1

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.