Inconsistent behaviour in `Transition` component and lifecycle hooks like `onBeforeUnmount` and `onUnmounted`

sadeghbarati commented 4 months ago

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 https://github.com/davidjerleke/embla-carousel/issues/869

Created the same Vue SFC demo in svelte and react

quiteeasy commented 4 months ago

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.

edison1105 commented 1 month ago

Similar to #4831

vuejs / core