Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nested transitions premature end #3506

Closed
francc opened this issue Aug 23, 2016 · 2 comments
Closed

Nested transitions premature end #3506

francc opened this issue Aug 23, 2016 · 2 comments
Labels
bug

Comments

@francc
Copy link

francc commented Aug 23, 2016

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
Copy link
Member

LinusBorg commented Aug 24, 2016 •
edited

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

@LinusBorg LinusBorg added the bug label Aug 24, 2016
@francc
Copy link
Author

francc commented Aug 24, 2016

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.

@yyx990803 yyx990803 added the 2.0 label Aug 27, 2016
yyx990803 added a commit that referenced this issue Aug 27, 2016
@yyx990803
ensure transition end detection only count events triggered on target…
98876f0 
… element (fix #3506)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yyx990803 @francc @LinusBorg