How to vuetify page transition?

Question

I have a spa vue page with vuetify, and when I change between the components of the aplication I want the component shows with a transition. I tried with the <v-slide-y-transition> tag and the transition="slide-y-transition attribute but nothing works. Here some examples of what I tried:

Example with the "vuetify tag":

    <template>
      <v-app>
        <v-slide-y-transition>
          <h1>Test</h1>
        </v-slide-y-transition>
      </v-app>
    </template>

Example with the attribute:

   <template>
      <v-app>
        <div transition="slide-y-transition">
          <h1>Test</h1>
        </div>
      </v-app>
   </template>

Ophiology

Answer 1

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;
}

Demb

Thanks a lot, first the transition doesn't show because i think the transitions need a trigger, but thanks to the documentation you share, I see the <transition> tag with the attribute appear do the job. Here a example, just in case the code helps anyone: codepen.io/GreyGonz/pen/paNmzd – Ophiology

Answer 2

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>

Tingley

Thanks a milliion. I have been working with vuetify for 3 days. I was wondering how to do page animation. I don't why i can't proper documentation about this. Anyway, thanks a lot . – Dwan

the general vuetify transitions page is here: vuetifyjs.com/en/styles/transitions the api transitions page for e.g. slide-x-transition: vuetifyjs.com/en/api/v-slide-x-transition and the documentation for the mode property: vuejs.org/v2/api/#transition – Eckmann

Answer 3

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>

Heterograft