How to remove v-tab transition slide in Vuetify?

user_1833620 0
Viewed 3692

Is it possible to remove transition slide when click 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>

This is not working

vuetify.js css
3 Answers

Possible when you use :transition=false with 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>

Unfortunately :transition="false" is not working on v-tabs level ("vuetify": "2.4.0")

user_44594740

Write this in your scss style tag:

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

I can't speak to the validity of this regarding Vuetify 2.x but as of the current Vuetify 3 documentation this is the new example of how to use v-tabs:

<template>
  <v-card>
    <v-tabs
      v-model="tab"
      background-color="primary"
    >
      <v-tab value="one">Item One</v-tab>
      <v-tab value="two">Item Two</v-tab>
      <v-tab value="three">Item Three</v-tab>
    </v-tabs>

    <v-card-text>
      <v-window v-model="tab">
        <v-window-item value="one">
          One
        </v-window-item>

        <v-window-item value="two">
          Two
        </v-window-item>

        <v-window-item value="three">
          Three
        </v-window-item>
      </v-window>
    </v-card-text>
  </v-card>
</template>

Removing the tab transition animation from the v-window component with :transition="false" works like so:

<VTabs v-model="tab">
     <VTab value="one">One</VTab>
     <VTab value="two">Two</VTab>
</VTabs>
<VWindow v-model="tab">
  <VWindowItem value="one" :transition="false">One</VWindowItem>
  <VWindowItem value="two" :transition="false">Two</VWindowItem>
</VWindow>

P.S. According to the docs page Vuetify 3 is still in Beta and may change so check there first in the future for an updated implementation

user_142115490
Related