如何在 Vuetify 中删除 v-tab 过渡幻灯片？

【问题标题】：How to remove v-tab transition slide in Vuetify?如何在 Vuetify 中删除 v-tab 过渡幻灯片？
【发布时间】：2021-03-10 08:13:50
【问题描述】：

点击v-tabs时是否可以去掉过渡幻灯片？

 <v-tabs v-model="tab" :transition="false" :reverse-transition="false">
        <v-tab href="#tab1" >
          tab1
        </v-tab>
        <v-tab href="#tab2">
          tab2
        </v-tab>
      </v-tabs>

这不行

【问题讨论】：

标签： css vuetify.js

【解决方案1】：

当您将 :transition=false 与 v-tab-item 一起使用时可能：

<v-tabs v-model="tab">
  <v-tab key="registration">Registration</v-tab>
  <v-tab key="login">Login</v-tab>
  <v-tabs-items v-model="tab">
     <v-tab-item key="registration" :transition="false">
        some content
     </v-tab-item>
     <v-tab-item key="login" :transition="false">
        some content
     </v-tab-item>
  </v-tabs-items>
</v-tabs>

不幸的是 :transition="false" 在 v-tabs 级别上不起作用（“vuetify”：“2.4.0”）

【讨论】：

【解决方案2】：

把这个写在你的 scss 样式标签中：

.v-tabs {
  ::v-deep {
    .v-tabs-slider-wrapper {
      transition: none;
    }
  }
}

【讨论】：