Question

I’m trying to write something that has a callback function for a webkitTransitionEnd eventListener, but for some reason the eventListener is getting fired twice (doSomething is executed twice).

Something.prototype.functionOne = function() {
    this.lightbox = document.createElement('div');
    if (this.transitions)
        this.element.addEventListener('webkitTransitionEnd', this, false);

    window.setTimeout(function() {
        this.element.className = 'visible';
    }.bind(this), 0);
}

Something.prototype.handleEvent = function(event) {
    event.stopPropagation();
    this.doSomething();
}

This doesn’t work on Safari 5.1 without calling doSomething twice. I don’t want to remove the eventListener on the first run, I just want it to execute once when the class is changed.

Live http://mynameisraj.com/code/cssbox

Answer 1

After doing some investigation, it appears to me that handleEvent is being called once each for two separate WebKitTransitionEvent events, which differ in propertyName – the first event has the propertyName of "opacity"; the other has "-webkit-transform".

I presume that handleEvent is always called once for each CSS property that finishes animation, followed by one with "-webkit-transform" for the entire block of transitions.

To fix your example, I believe this will work:

Something.prototype.handleEvent = function(event) {
    event.stopPropagation();

    if ( event.propertyName === "-webkit-transform" ) {
        this.doSomething();
    }
}