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.