Vuetify transitions: How to set the transition speed

If you use Vue 2.2.0+ the transition component has a duration prop so, it would look like this (if you use the vuetify transition name from your question):

 <transition appear name="slide-y-transition" :duration="{ enter: 500, leave: 800 }>

Note: I noticed that you could add duration property to vuetify transition components. Its value is in milliseconds. But it's not very accurate, so I use it along with some CSS as below.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    show: false,
  }),
})
p {
  background: lightgreen;
}

.slide-x-transition-enter-active {
  background-color: #b2fab2;
  transition: background-color 2s, all 2s;
}
.slide-x-transition-enter-to {
  background-color: white;
}
.slide-x-transition-leave-active {
  background-color: white;
  transition: background-color 2s, all 2s;
}
.slide-x-transition-leave-to {
  background-color: #fccece;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<v-app id="app">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <v-slide-x-transition duration="2000">
   <p v-if="show">hello</p>
  </v-slide-x-transition>
</v-app>

Vuetify transitions don't appear to have configuration properties, so you'd have to create your own in order to tweak the timing.

You could use a Vue <transition> component, using CSS transition property to set the timing of the animation.

For example, the following CSS sets the duration of the slide-fade animation to 2 seconds.

.slide-fade-enter-active {
  transition: all 2s ease;
}

Demo:

new Vue({
  el: '#app',
  data: () => ({
    show: false,
  }),
})
.slide-fade-enter-active {
  transition: all 2s 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
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateY(30px);
  opacity: 0;
}

footer {
  position: absolute;
  bottom: 0;
}
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <footer>
    <transition name="slide-fade">
      <p v-if="show">hello</p>
    </transition>
  </footer>
</div>