Nested transitions premature end

francc
创建于
2016-08-23 15:27:39

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.

2条回答
LinusBorg
回复于
2016-08-24 10:51:57
#1

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
回复于
2016-08-24 12:56:52
#2

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.

当前位于第1页,总计2 条回复

推荐相似问题

Merging a null value into v-model attribute removes the attribute (maybe?)

(apologies in advance if this is not a Vue issue! I can't quite fully identifiy the cause with my own knowledge!) Vue.js
讨论数 3
vue
创建时间:2016-08-23 14:21:36

setSelected triggered on <select> by unrelated data object replacement

Vue.js version 2.0.0-rc.3 (or any 2.0 version) Browser version Platform Browser Reproduces OS X Chrome 52.0.2743.116 (64
讨论数 6
vue
创建时间:2016-08-23 14:16:16

Sorting components produces duplicate nodes in the dom

Thank you so much for this awesome framework. I've only been working with the framework for a couple of months now, and
讨论数 3
vue
创建时间:2016-08-23 13:00:51

how to dynamic insert the child-components into father-components

I have such a demand.There have one father-components and also some child-components,I want to dynamic insert the child-
讨论数 2
vue
创建时间:2016-08-23 08:10:22

cannot set props to dynamic components

Vue.js version 2.0.0-rc.3 Reproduction Link https://jsfiddle.net/x9t73qa6/1/ Steps to reproduce Run What is Expected? Sh
讨论数 2
vue
创建时间:2016-08-23 04:08:22

Can not the parameter of 'limitBy' be dynamic??

I've made a mistake, please close this issue, sorry.
讨论数 2
vue
创建时间:2016-08-23 01:05:52

render function called when nothing has changed

Vue.js version 2.0.0-rc.3 Reproduction Link https://jsfiddle.net/z4n5vw60/ Steps to reproduce Click the "increment" butt
讨论数 8
vue
创建时间:2016-08-22 21:23:44

Is it possible to use v-model inside JSX render method?

I have a list of inputs and want to use v-model with them: render(h) { return ( <div> {this.items.map(item =
讨论数 6
vue
创建时间:2016-08-22 16:35:34

failed to reference $children in v-for

Vue.js version 2.0.0-rc.3 Reproduction Link https://jsfiddle.net/fxwnmk7q/6/ Steps to reproduce Run What is Expected? Pa
讨论数 2
vue
创建时间:2016-08-22 15:04:29

Feature Request: Is there any possible to read other props in a specific validator function?

As above, I want to validate a props data propA in the validator function and I want to read the props data propB so tha
讨论数 10
vue
创建时间:2016-08-22 13:08:40