Leaving transition does not work properly when using JavaScript hooks.
Version
3.0.5
Reproduction link
https://codepen.io/ustbhuangyi-the-bold/pen/MWboJav
Steps to reproduce
- Click the Toggle button, wait for the enter transition end.
- Then click the Toggle button again.
What is expected?
The leaving transition works well and after the transition end, the red square disappear.
What is actually happening?
The square disappear immediately, the leaving transition does not work properly.
This will be fixed in https://github.com/vuejs/vue-next/pull/3230, as a workaround, you can use v-if
instead of v-show
.
Another workaround, you can remove the changes to the state, see https://codepen.io/hcysunyang/pen/wvoeOaa
Another workaround, you can remove the changes to the state, see https://codepen.io/hcysunyang/pen/wvoeOaa
Haha, that's the reason why it looks strange. But I do need to do this