【问题标题】: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】:
        1. 移除 Vuetify 步进器过渡:

          .v-stepper__content, .v-overlay { 过渡:无!重要; }

        2. 仅从 stepper-header(我一直在寻找)中删除 Vuetify 步进器转换。我添加了一个类“stepper-body”到:

          .stepper-body { 位置:相对; }

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2020-09-17
          • 1970-01-01
          • 2019-03-26
          • 2021-03-18
          • 2022-01-07
          • 1970-01-01
          • 2012-09-20
          • 1970-01-01
          相关资源
          最近更新 更多