mattstuehler mattstuehler - 1 month ago 9
Javascript Question

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

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

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.