Search code examples
javascriptanimationcsswebkit

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.

Solution

  • 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.