前言
移动端路由切换，组件切换等动画效果，是很常见的需求，在此记录切换动画的代码；
实现思路
在Vue项目中，使用transition内置组件，可以实现很多动画效果，详见：https://v3.cn.vuejs.org/guide/transitions-enterleave.html#%E8%BF%87%E6%B8%A1class；
与vue-router结合时，文档详见：https://next.router.vuejs.org/zh/guide/advanced/transitions.html；
以下代码都是基于vue3.0版本
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
36
37
<!-- App.vue -->
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transitionName">
<component :is="Component" />
</transition>
</router-view>
<style>
.pop-out-enter-active,
.pop-out-leave-active,
.pop-in-enter-active,
.pop-in-leave-active {
will-change: transform;
transition: all 300ms;
height: 100%;
width: 100%;
top: 0px;
position: absolute;
backface-visibility: hidden;
perspective: 1000;
}
.pop-out-enter-from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.pop-out-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.pop-in-enter-from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.pop-in-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
const router = createRouter({
routes,
history: createWebHashHistory()
});
// 路由的后置钩子
router.afterEach((to, from) => {
const toDepth = to.meta.index;
const fromDepth = from.meta.index;
// 当toDepth < fromDepth时，是退出，一般是向右滑动
to.meta.transitionName = toDepth < fromDepth ? 'pop-out' : 'pop-in';
// to.meta.transitionName = toDepth < fromDepth ? 'van-slide-right' : 'van-slide-left';
console.warn(to.meta.transitionName);
});
![](./img/icon_wechat.png"){kind=icon}