# 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

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
Last updated: 8/7/2020, 3:39:57 PM