Событие webkitTransitionEnd наступает, когда переходы заканчиваются на div И переходы заканчиваются на всех divах CHILD?

Question

All

У меня есть ситуация, которая выглядит примерно так:

Моя HTML-страница a содержит div (который я назову "parentDiv" ), для которого я выполняю переход. Когда этот переход заканчивается, он должен вызвать "onTransitionEndParent"

parentDiv содержит div (который я назову "childDiv" ), для которого я выполняю другой переход. Когда этот переход заканчивается, он должен вызвать "onTransitionEndChild" .

Итак, мой код выглядит примерно так:

parentDiv.addEventListener("webkitTransitionEnd", onTransitionEndParent, false);
childDiv.addEventListener("webkitTransitionEnd", onTransitionEndChild, false);

Проблема, которую я нахожу ...

onTransitionEndParent вызывается, когда заканчивается переход parentDiv (правильно). Тем не менее, ТАКЖЕ вызывается, когда заканчивается переход childDiv (не то, что я ожидал ...)

Другими словами ...

• onTransitionEndChild вызывается, когда заканчивается переход childDiv
• onTransitionEndParent вызывается, когда заканчивается переход parentDiv. И СНОВА , когда переход childDiv заканчивается

Это правильное поведение, или я делаю что-то не так?

Есть ли способ убедиться, что onTransitionEndParent вызывается ТОЛЬКО, когда заканчивается переход parentDiv, а НЕ когда заканчивается какой-либо из переходов дочернего элемента div?

Заранее большое спасибо.

Answer 1

transitionEnd - это так называемое всплывающее событие, которое передается (всплывает) от ребенка к его родителям.

Параметры для вас:

1. Либо проанализируйте event.target свойство объекта события - оно должно содержать элемент с завершенным переходом.
2. Или установить обработчики событий transitionEndна каждом дочернем элементе и вызовите event.stopPropagation(), чтобы предотвратить его пузыри.

Answer 2

Я столкнулся с той же проблемой после последнего обновления Chrome. Детская анимация запускает анимацию для родителя. Это произошло только в Chrome для настольных компьютеров, а не в FF или Chrome для мобильных устройств.

Для тех, кто заинтересован, я решил это с помощью:

        $(element).on("animationend webkitAnimationEnd", function(){
            //do something
        })
        .children().on("animationend webkitAnimationEnd", function(){
             return false;   //you can just use event.stopPropagation()
         });

Answer 3

Чтобы добавить к ответу @ c-smiles, проверка события.propertyName помогает при наличии нескольких переходов в элементе. Так, например -

button.addEventListener('transitionend', function(event) {
  if (event.target.classList.contains('button') && event.propertyName === 'opacity') {
    button.classList.add('hide');
  }
}, false);