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>

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