如何从 VuetifyJS Vertical Stepper 中移除过渡效果？答案

【问题标题】：How to remove the transition effect from the VuetifyJS Vertical Stepper?如何从 VuetifyJS Vertical Stepper 中移除过渡效果？
【发布时间】：2018-10-23 05:54:50
【问题描述】：

是否可以在Vuetify Stepper 中单击继续后直接显示下一步？（或者换句话说：如何去除过渡滑出效果）

【问题讨论】：

也在搜索这个！看起来VStepperContent 上有一个computedTransition:"v-tab-reverse-transition" - 但没有办法改变它 AFAIK

标签： vue-component vuetify.js stepper

【解决方案1】：

似乎没有提供任何选项来更改Vue component itself 中的过渡效果。

但是，您可以通过将.stepper-content 元素的transition css 属性设置为none 来禁用它。

例如，您可以创建一个no-transition 类：

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

然后将其添加到<v-stepper>组件标签中：

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

Here's a codepen with a working example.

【讨论】：

【解决方案2】：

我的合作过

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

如果有人没有通过@thanksd 的回答成功。

【讨论】：

【解决方案3】：

这对我有用：

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

Vuetify 2.2.8 版

【讨论】：

【解决方案4】：

移除 Vuetify 步进器过渡：

.v-stepper__content, .v-overlay { 过渡：无！重要； }
仅从 stepper-header（我一直在寻找）中删除 Vuetify 步进器转换。我添加了一个类“stepper-body”到：

.stepper-body { 位置：相对； }

【讨论】：