webkitTransitionEnd event fired when transitions end on div AND transitions end on all CHILD divs?

Question

All,

I have a situation that looks roughly like this:

My HTML page a contains div (which I'll call "parentDiv") on which I'm performing a transition. When that transition ends, it should call "onTransitionEndParent"

parentDiv contains a div (which I'll call "childDiv") on which I'm performing a different transition. When that transition ends, it should call "onTransitionEndChild".

So, my code looks roughly like this:

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

The problem I'm finding...

onTransitionEndParent is called when the parentDiv's transition ends (correct). However, it's ALSO called when childDiv's transition ends (not what I expected...)

In other words...

• onTransitionEndChild is called when childDiv's transition ends
• onTransitionEndParent is called when parentDiv's transition ends AND AGAIN when childDiv's transition ends

Is this the correct behavior, or am I doing something wrong?

Is there a way to make sure that onTransitionEndParent is ONLY called when the parentDiv's transition ends, and NOT when any of it's child div's transitions end?

Many thanks in advance.

Answer 1

transitionEnd is so called bubbling event that is being dispatched (bubbles up) from child to its parents.

Options for you:

1. Either analyze event.target property of the event object - it should contain element with ended transition.
2. Or to install transitionEnd event handlers on each child element and call event.stopPropagation() so to prevent its bubbling.

Answer 2

To add to @c-smiles answer, checking for event.propertyName helps when there are multiple transitions on the element. So, for example -

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

Answer 3

I encountered the same problem after the last chrome update. Children animations triggered animationend for the parent. This only happened in Chrome for desktop and not in FF or Chrome for mobile.

For anyone interested I solved this by using:

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