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

user_49383 0
Viewed 12402

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.

webkit animation css javascript
3 Answers

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