webkitTransitionEnd eventListener Увольнение дважды

Question

Я пытаюсь написать что-то, что имеет функцию обратного вызова для webkitTransitionEnd eventListener, но по какой-то причине EventListener запускается дважды (doSomething выполняется дважды).

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

Это не работает в Safari 5.1 без двойного вызова doSomething. Я не хочу удалять eventListener при первом запуске, я просто хочу, чтобы он выполнялся один раз при изменении класса.

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

Answer 1

После некоторого исследования мне кажется, что handleEvent вызывается один раз для двух отдельных WebKitTransitionEvent событий, которые отличаются propertyName - первое событие имеет propertyName"opacity";другой имеет "-webkit-transform".

Я предполагаю, что handleEvent всегда вызывается один раз для каждого свойства CSS, которое завершает анимацию, а затем одно с "-webkit-transform" для всего блока переходов.* Чтобы исправить ваш пример, я считаю, что это будет работать:

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

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