Webkit transitionEnd группировка событий

просто удалите событие:

var transEnd = function(event) {
   event.target.removeEventListener("webkitTransitionEnd",transEnd);
};

он будет срабатывать для первого свойства, а не для других.

Проверьте событие propertyName:

function transEnd(event) {
    if (event.propertyName === "left") {
        alert( "Finished transition!" );
    }
}

var node = document.getElementById('node');
node.addEventListener( 'webkitTransitionEnd', transEnd, false );

Таким образом, он будет срабатывать только при завершении свойства "left". Это, вероятно, будет работать лучше всего, если оба свойства заданы одинаковой продолжительностью и задержкой. Кроме того, это будет работать, если вы измените только "левый" или оба, но не, если вы измените только "верх".

В качестве альтернативы вы можете использовать некоторые трюки таймера:

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

Это должно гарантировать, что ваш код будет работать не более 1 раз каждые 100 мс. Вы можете изменить задержку setTimeout в соответствии с вашими потребностями.

Если вы предпочитаете его в JQuery, попробуйте это. Обратите внимание, что существует параметр события для хранения объекта события и использования в соответствующей функции.

$("#divId").bind('oTransitionEnd transitionEnd webkitTransitionEnd', event, function() { 
    alert(event.propertyName) 
});

с моей точки зрения ожидаемое поведение кода было бы

• запускает оповещение только после завершения последнего перехода
• поддерживает переходы по любому свойству
• поддержка 1, 2, много переходов без проблем

В последнее время я работал над чем-то похожим для менеджера переходов на страницы, управляемым таймингами CSS.

Это идея

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

Здесь вы можете проверить эту реализацию или (проще) версия jQuery, оба работают только с Webkit

Если вы используете webkit, я предполагаю, что вы мобилизуете веб-приложение для межплатформенного доступа.

Если вы рассматривали абстрагирование доступа к кросс-платформе на уровне презентации веб-приложения?

Webkit не обеспечивает естественный внешний вид мобильных устройств, но здесь может помочь новая технология.