Nested transitions premature end

[francc]

Vue.js version

2.0.0-rc3

Reproduction Link

https://jsfiddle.net/hv59sebz/

Steps to reproduce

Click on the "Transition broken" button (real click as usually touchpad taps are not long enough to trigger the button active animation).

What is Expected?

The DIV element inside the transition tag should be removed from the DOM when the move transition ends, that is when it reaches the right border of the page after the 3 second transition is done.

What is actually happening?

The div element inside the transition tag is being removed from the DOM when the nested transition on button active ends, before it reaches the right border of the page.

[LinusBorg]

This is because the second button click emits a transitionend event(*) , and that event bubbles up and is eventually cached by the Vue transtition, which listens for this event in order to catch the end of the main transition.

a quick fix would be to stop the propagation on the button:

<button id="animated_button" @click="hide" @transitionend.stop>Transition broken</button>

We ill look into weither we can fix with, I think about comparing the event's target and currentTarget

---

(*) why that is even though no CSS attribute of the button is really transitioning in this situation, is beyond me

[francc]

Adding @transitionend.stop worked. Thanks! I thought it should be something related with the handling of the transitionend event, but I have not found where is that on Vue 2 to try patching it.