How to vuetify page transition?
The Vuetify transitions as you have them only work on the Vuetify library components. e.g. <v-menu transition="slide-x-transition">
where v-menu
is one of the components. You can't use the transitions that way on a simple <div>
.
However, Vue.js itself supports transitions using the following format.
<transition name="slide">
<div> element you are apply the transition to</div>
</transition>
You will have to define the css for the transition as per the documentation here. or you can use a css library like Animate.css
Example css from documentation:
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
In case someone needs to know how to use VuetifyJS transitions with router-view
which I understood by page transitions.
Vuetify router-view
Transitions
Vue2 / Vuetify2
Here you can use the Vuetify transitions directly
<v-main>
<v-container fill-height>
<v-slide-x-transition mode="out-in">
<router-view />
</v-slide-x-transition>
</v-container>
</v-main>
Vue3 / Vuetify3
In Vue3 / Vuetify3 this is unfortunately no longer directly usable due to the changes in the router-view API. But of course you can pick the values of the Vuetify transitions on Github and recreate them accordingly.
<template>
<v-main>
<v-container fill-height>
<router-view v-slot="{ Component, route }">
<transition name="slide-x" mode="out-in">
<component :is="Component" :key="route.path" />
</transition>
</router-view>
</v-container>
</v-main>
</template>
<style>
/* v-slide-x-transition look a like */
.slide-x-enter-active,
.slide-x-leave-active {
transition: transform .6s cubic-bezier(0.25, 0.8, 0.5, 1), opacity .8s;
opacity: 1;
}
.slide-x-enter-from,
.slide-x-leave-to {
opacity: 0;
}
.slide-x-enter-from {
transform: translateX(100px);
}
.slide-x-leave-to {
transform: translateX(-100px);
}
</style>
You can use Vuejs transition For changing components instead of vuetify transitions look at the following example:
<transition name="slide-in-down" appear appear-active-class="animated slideInDown">
<div> element you are apply the transition to</div>
</transition>