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

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