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.