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

Все,

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

Моя HTML-страница содержит 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-переходов?

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

Ответ 1

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

Варианты для вас:

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

Ответ 2

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

Для всех, кого это интересует, я решил это, используя:

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

Ответ 3

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

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