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)

Selfwinding

Searching for this too! Looks like there is a computedTransition:"v-tab-reverse-transition" on the VStepperContent - but there is no way to change it AFAIK – Eiland

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.

Pentaprism

Answer 2

Mine worked with

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

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

Superimpose

Answer 3

This worked for me:

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

Vuetify version 2.2.8

Zebrawood

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

Jeweller