How to remove the transition effect from the VuetifyJS Vertical Stepper?

Question

Is it possible to show the next step directly after clicking continue within the Vuetify Stepper? (or in other words: how to remove the transition slide out effect)

Answer 1

It doesn't look like there is any provided option to change the transition effect in the Vue component itself.

But, you can disable it by setting the transition css property to none for the .stepper-content elements.

For example, you could create a no-transition class:

.no-transition .stepper__content { transition: none; }

And then add it to the <v-stepper> component tag:

<v-stepper v-model="e1" class="no-transition">
  ...
</v-stepper>

Here's a codepen with a working example.

Answer 2

Mine worked with

.no-transition .v-stepper__content { transition: none; }

In case somebody didn’t succeed with @thanksd's answer.

Answer 3

This worked for me:

.v-stepper__wrapper {
  transition:none !important;
}

Vuetify version 2.2.8

Answer 4

1. Remove the Vuetify stepper transition:

   .v-stepper__content, .v-overlay { transition: none !important; }

2. Remove the Vuetify stepper transition only from stepper-header (which I was looking for). I added a class "stepper-body" to :

   .stepper-body { position: relative; }