[Vuejs]-Why is my transition not working on "leave"?

0👍

It’s probably caused by the use of different versions of Vue.

Your question is tagged vuejs3, so you are very likely using Vue 3, but, in the example you linked, vue version 2.6.4 is being used.

In vue 3, at least, you must use the directives v-if or v-show in the root element inside the Transition component for it to trigger the changes whenever the root component inside appears and disappears.

you can read more about transitions here

0👍

Use :key="$route.fullPath", it binds the route’s full path as the key, ensuring that a route change triggers the transition with the leave-active class.
Now, when you navigate between routes, the leaving component will have the leave-active class applied, and you should see the transition effect as defined in your CSS.

Leave a comment