为了使客户的体验感更强,我们的APP中应该加入适当的转场动画效果来提升舒适感
- 首先我们要监听路由然后判断其是前进还是后退,来实现不同的动画
export default {
data() {
return {
transitionName: "slide-left"
};
},
watch: {
$route(to, from) {
// 通过判断路由自定义的级别来判断是转入还是转出
if (to.meta.index > from.meta.index) {
this.transitionName = "slide-left";
} else {
this.transitionName = "slide-right";
}
}
}
};
- template
<div id="app">
<transition :name="transitionName">
<router-view />
</transition>
</div>
- style
/*
动画样式
will-change: transform 优化渲染速度
*/
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 0.5s;
width: 100%;
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);
}
- router/index.js
// 首页
{
path: "/",
name: "Home",
component: () => import("../views/Index.vue"),
meta: {
keepAlive: true,
index: 1 //判断index来决定页面的层级
}
},
// 详情
{
path: "/detail",
name: "Detail",
component: () => import("../components/Hot/Detail.vue"),
meta: {
keepAlive: false,
index: 2 //判断index来决定页面的层级
}
},
// 城市搜索
{
path: "/city",
name: "City",
component: () => import("../components/Header/City.vue"),
meta: {
index: 3 //判断index来决定页面的层级
}
},