CODEWITHSUNDEEP
javascriptanimationcsswebkit
mattstuehler
mattstuehler

Reputation: 9322

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

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.

Upvotes: 19

Views: 12698

Answers (3)

scottsandersdev
scottsandersdev

Reputation: 161

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);

Upvotes: 4

Roumelis George
Roumelis George

Reputation: 6746

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()
         });

Upvotes: 3

c-smile
c-smile

Reputation: 27470

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.

Upvotes: 34

Related Questions