# Transition

You can change the default page and tab transitions by adding the tab-transition and page-transition attributes to your router-tab

WARNING

If the scope of the CSS component (configured scoped), you need to add >>> / /deep/ or ::v-deep before the selectors
The .router-tab-item sets the transition and transform-origin styles by default, you may need to override it to avoid affecting the custom transition effect

API Demo

Example:

<template>
  <router-tab page-transition="page-fade" tab-transition="tab-scale" />
</template>

<style lang="scss" scoped>
  ::v-deep {
    // Page fade transition
    .page-fade {
      &-enter-active,
      &-leave-active {
        transition: opacity 0.5s;
      }

      &-enter,
      &-leave-to {
        opacity: 0;
      }
    }

    // Tab scale transition
    .tab-scale {
      &-enter-active,
      &-leave-active {
        transition: opacity 0.5s, transform 0.5s;
      }

      &-enter,
      &-leave-to {
        opacity: 0;
        transform: scale(1.5);
      }
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# Detailed configuration

You can also use the provided object tab-transition and page-transition value, in order to achieve a detailed configuration of transition effects

Configuration reference: Vue - transition (opens new window)

<router-tab
  :tab-transition="{
    name: 'my-transition',
    'enter-class': 'my-transition-enter'
  }"
/>

1
2
3
4
5
6

← Iframe Tab Slot →