前言：在后台开发的过程中，页面经常有路由的转换，但是由于转换过程太过于死板，所以想给它加入一点点动画效果，或者是淡入/淡出效果，提高体验

具体方法

在Vue2中，可以在路由router-view上加上transition和效果即可

是基本的动态组件，所以我们可以用组件给它添加一些过渡效果

1
2
3
<transition name="slide-fade">
  <router-view></router-view>
</transition>

Vue3

1
2
3
4
5
<router-view v-slot="{ Component }">
  <transition name="slide-fade">
    <component :is="Component" />
  </transition>
</router-view>

或者：

1
2
3
4
5
6
7
<RouterView v-slot="{ Component }">
  <transition name="slide-fade" >
    <keep-alive>
      <component class="child-view" :is="Component" :key="key" v-show="is_show"/>
    </keep-alive>
  </transition>
</RouterView>

该过渡效果的CSS：

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
/* 离开 */
.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(50px)
}
/* 进入 */
.slide-fade-enter-from {
  opacity: 0;
  transform: translateX(-50px)
}

/* 或者 */
.fade-enter {  
  opacity: 0;
  transform: translateX(-50px);
}

.fade-leave-to{
  opacity: 0;
  transform: translateX(50px)
}

.fade-enter-active,
.fade-leave-active {
  /* transition: all 1s; */
  transition: all .6s cubic-bezier(.55, 0, .1, 1);
}

Vue3中enter事件的css可能会失效，需要重写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.fade-enter-from {  
  opacity: 0;
  transform: translateX(-30px);
}

.fade-enter-to { 
  opacity: 1;
  transform: translateX(0px);
}

.fade-leave-to{
  opacity: 0;
  transform: translateX(100px)
}

.fade-enter-active,
.fade-leave-active {
  /* transition: all 1s; */
  transition: all .6s cubic-bezier(.55, 0, .1, 1);
}

transiton的属性及其含义：

  1. name为过渡效果名，后续的css样式需要与 name建立关系，以name替代上面的v
  2. mode设置动画模式，原先进入和离开的元素都是在同时开始动画的，使用mode=”out-in”可以先执行完离开动画，然后再执行进入动画