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.

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

Inconsistent behaviour in Transition component and lifecycle hooks like onBeforeUnmount and onUnmounted #10927

Open
sadeghbarati opened this issue May 13, 2024 · 1 comment

Comments

@sadeghbarati
Copy link

sadeghbarati commented May 13, 2024

Vue version

3.4.27

Link to minimal reproduction

https://play.vuejs.org/#eNqVVW1v2zYQ/is3DYNdLHqxZceZlhRdi37YPmxD0/ZLVQSMRNlMKFIQKTeB4f/eIynJlmOnKfzFvHvu5bk73W28v6oqWDfUS7xLldWs0qCobqrXqWBlJWsNG6hpAVsoallC6iE29f7ste9ILRtFeacOwk5ivFpkJoXSwClZM7GEK+NuXBCu6CtUXoYuKsbDh6ZlxYmm+AK4zNkaMk6Uuko9UlWpZ8Wo+FgToZhmUoAgJUU1htQYrQW0tmufFaj7pQ29p0ZAn3i4MwrRqosR7oK4bFpll1mHu220xjzeZJxl9xhtx/NI3GtNsGa699zFck4GcS7DvWLgU+lHTkFlsqI5SgIsCGyMwYqy5UonMIlqWmJFt6i05fCp0LT2SabZmp71UpMVbaXOwy6fBGRFMqYfYa6OuDI9PnSkpXPSGiYQOUNsrMkYU/XOPDcsfkmq4E5JgcNmbdJWoVIvcV6MjJa3nPhZ2x/fjlGC8pXWlUrCcEnQSVUGTIaiKpOn8DcXQRTMQqrK8KkyQDHapx4SORbvJ2KdjPOjGH5NXf39RjNu2b+U3tDyNNMhrk/I5IPN2WJPNM6SKNjyoCOZLCvGaf1fZQZi2BnCufz2j5XpujEz5eTZimb3R+R36sFx+7+mitZrbGSvwy9hSbVTv7/+lz7g/15ZyrzhbdtPKD9QJTmSw4/Iwt42Ise093A227/tgOFX+FG9f9AU57wlZRK11bB4u9fePUN9l24czPaquL/tntuhUrylhazpJ1HKRugzFLR/ad4t1xH6GPU2tqGd+88N7Tbssc+j37JfrPYDLb7iAjr0MN4Al7Jy3GFr1m8qDhIbj1/B1WvH27iUnAZcLsejA9zIWPcueirPmPeYnelLl78lknrmcnQvpLi7B0+wNzcYXBMmzEAcHgVkgTgGTMACnR4YKs5yrCgknXxkJf4Ifgc2OCHXRg6bDTDY4jQcuyHd/5cudZtDu0/XtC5wgBNYsTynAssF8I3lemVWffSbfWeSyzqBX4uiaNf1IX3nLGcKo+JyLjh9GCItO4cyStzf+Itj5//QDuCuUZoVj74JgEchgcyeBqsjnC2Fz5CiGshLJvw2c3Mcdifrwl0sgFuS3S9xTkWOZOI4blN0lZ+47HYYDO5oR3F0Hi8G4OlJcJxFi/nQc3wSvJhGs/l8AJ6dBP8xicj5MI35SfA0nuZx1y0HPj9NMJrfziYD8OIZ8MVkcez63uAomb2H+wmXVzBdeNvvs45dNg==

Steps to reproduce

Click the Start transition button to destroy and reinitialize the Carousel.

The Carousel is within the Transition component.

What is expected?

While the Carousel is being destroyed, I expect the Component Instance to wait for the Transition to complete before destroying itself

What is actually happening?

The component is destroyed before the Transition duration has completed.

System Info

No response

Any additional comments?

Related issue in embla-carousel davidjerleke/embla-carousel#869

Created the same Vue SFC demo in svelte and react

@quiteeasy
Copy link
Contributor

As an alternative to component lifecycle methods, you can utilize Transition specific hooks. However, I'm unsure if the current behavior is unintended or if it should be modified. While I agree that it feels unsafe and counterintuitive, I'd appreciate the team's feedback on whether this should be addressed and potentially changed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants