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.
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
<transition appear> is breaking/flickering when toggling hide/show while transition is happening #10677
Comments
I have identified an issue in the Vue 3 repository that seems to persist even in the absence of an 'appear' prop. Specifically, when clicking on the overlay to close it, there is a short period during which no transition classes are applied, causing the styles to revert to their final state(there are flicks because of it). In contrast, the Vue 2 version did not exhibit this behavior. Instead, if a transition had not yet been completed, the 'v-enter-to' and 'v-enter-active' classes were immediately replaced with 'v-leave-active' and 'v-leave-to' classes, ensuring a seamless transition without being in the final state. To address this discrepancy, I am preparing a pull request (PR) that aims to correct the behavior in Vue 3, aligning it more closely with the transition class handling in Vue 2. I look forward to any feedback. |
It also affects |
Vue version
3.4.21
Link to minimal reproduction
https://codesandbox.io/p/sandbox/adoring-roman-nlw932
Steps to reproduce
Spam click the Show Overlay button
transition-appear-vue3.mp4
What is expected?
The fade transition should smoothly toggle between opacity: 0 and opacity: 1. no matter how fast you click.
transition-appear-vue2.mp4
What is actually happening?
The behavior from vue@2 is exptected.
Demo: https://codesandbox.io/p/sandbox/heuristic-gould-pyl93t i
System Info
Any additional comments?
Related issue without "appear" option #2482
The text was updated successfully, but these errors were encountered: