如何移除VuetifyJS垂直步进器的过渡效果？

嘿，我刚好折腾过这个需求！要让Vuetify步进器点击「继续」后直接跳转到下一个步骤，去掉默认的滑出过渡动画，有两种简单又靠谱的方法，给你详细说说：

方法一：用CSS覆盖默认过渡样式 #

Vuetify的步进器步骤切换默认用的是滑入滑出过渡，我们可以直接通过CSS把过渡效果禁用掉：

/* Vuetify 2版本（组件内scoped样式需加深度选择器） */
::v-deep .v-stepper__content.v-slide-x-transition,
::v-deep .v-stepper__content.v-slide-x-transition--reverse {
  transition: none !important;
}

/* Vuetify 3版本（类名有更新） */
::v-deep .v-stepper-content.v-slide-x-transition,
::v-deep .v-stepper-content.v-slide-x-transition--reverse {
  transition: none !important;
}

这段代码会直接把步骤内容的过渡动画设为none，点击「继续」后步骤就会瞬间切换，完全看不到滑出效果。如果是全局样式的话，可以去掉::v-deep。

方法二：自定义无过渡的过渡组件 #

如果你不想用CSS覆盖，也可以给stepper指定一个自定义的过渡组件，这个组件不做任何动画处理：

首先在模板里给stepper加上transition属性：

<v-stepper transition="no-transition">
  <!-- 你的步进器步骤内容 -->
  <v-stepper-step>...</v-stepper-step>
  <v-stepper-content>...</v-stepper-content>
</v-stepper>

然后在组件的脚本部分注册这个自定义过渡组件：

<script>
export default {
  components: {
    'no-transition': {
      functional: true,
      render(h, { children }) {
        // 直接返回子元素，不添加任何过渡动画
        return children[0]
      }
    }
  }
}
</script>

这样步进器切换步骤时就会使用这个无过渡的组件，实现瞬间切换的效果。

两种方法都能达到你的需求，选哪种看你个人习惯啦～

内容的提问来源于stack exchange，提问作者Tom