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

Question

У меня есть элемент HTML, к которому я прикрепил событие webkitTransitionEnd.

function transEnd(event) {
    alert( "Finished transition!" );

}

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

Затем я перехожу к изменению его левого и верхнего свойств CSS, например:

node.style.left = '400px';
node.style.top = '400px';

Это заставляет DIV плавно переходить в новую позицию. Но, когда он заканчивается, появляются 2 окна оповещений, а я ожидал только одного в конце анимации. Когда я изменил только CSS-свойство left, я получаю одно окно с предупреждением - это означает, что два изменения стиля регистрируются как два отдельных события. Я хочу указать их как одно событие, как мне это сделать?

Я не могу использовать класс CSS для одновременного применения обоих стилей, потому что левые и верхние свойства CSS являются переменными, которые я узнаю только во время выполнения.

Answer 1

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

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

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

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

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

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 в соответствии со своими потребностями.

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

• активировать предупреждение только после завершения последнего перехода
• поддержка переходов для любого свойства
• поддержка 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

Answer 5

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

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

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