Vue 实现路由过渡动画

在进行路由跳转时,可以加上动画效果

准备工作

  1. 编写动画效果
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-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

实现步骤

  1. 为路由可能跳转到的组件添加索引,确保动画的过渡效果是有序的
    • 在 meta 中可以添加自定义参数,此处添加 index 用于表示索引
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
35
children: [
  {
    path: 'hot',
    name: 'hot',
    component: hot,
    meta: {
      index: 0
    }
  },
  {
    path: 'mooc',
    name: 'mooc',
    component: mooc,
    meta: {
      index: 1
    }
  },
  {
    path: 'self',
    name: 'self',
    component: self,
    meta: {
      index: 2
    }
  },
  {
    path: 'training/:id',
    name: 'training',
    component: training,
    props: true,
    meta: {
      index: 3
    }
  }
]
  1. 在需要跳转的路由外层包裹 <transition> 组件
    • 同时为组件指定可能执行的动画效果
1
2
3
<transition :name="transitionName">
  <router-view></router-view>
</transition>
  1. 通过监听路由变化判断具体执行哪个动画
    • 可以通过路由的参数获取到之前设置的索引,从而判断动画效果是向左还是向右
1
2
3
4
5
6
7
8
9
10
11
watch: {
  '$route' (to, from) {
    console.log(to)
    let toName = to.name

    const toIndex = to.meta.index
    const fromIndex = from.meta.index

    this.transitionName = toIndex < fromIndex ? 'slide-right' : 'slide-left'
  }
}