Webkit transitionEnd event grouping

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开发者_JAVA百科 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.

---

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.

---

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.

---

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) 
});

---

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

---

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.