《vue 页面进出类似APP的滑动效果》

最近一直在看vue，看到这个很奈斯，在大佬的代码里也有看到过，就是路由里的meta！！！，以及mode模式！

仿照原生APP实现进出页面左右滑动的效果

　　

在 router 里加一项, 类似这样,添加一个meta，用里面的index来判断页面层级

routes: [
{
// 默认的首页
path: '/',
name: 'Home',
component: Home,
meta: {index: 0}
},
{
// 选择城市
path: '/city',
name: 'City',
component: City,
meta: {index: 1}
}
]
在app.vue里面进行判断， index值越小代表层级越大， index小则是返回，index大则是进入

export default {
name: 'App',
data () {
return {
transitionName: ''
}
},
watch: {
$route (to, from) {
console.log(to.meta.index, from.meta.index)
if (to.meta.index > from.meta.index) {
this.transitionName = 'slide-left'
} else {
this.transitionName = 'slide-right'
}
}
}
}
那么 transition 组件的动画名字就根据是进入还是返回来给它对应的动画

<template>
<transition :name="transitionName" mode="out-in>
<keep-alive>
<router-view/>
</keep-alive>
</transition>
</template>
 如果有 keep-alive ，那么要把它包裹在 transition 动画组件里面

 

 最后，想要动画效果还是离不开CSS

CSS左滑右滑效果

@keyframes slideInLeft {
from {
transform: translate3d(100%, 0, 0);
position: fixed;
top: 0;
left: 0;
opacity: 1;
}
to {
transform: translate3d(0, 0, 0);
position: fixed;
top: 0;
left: 0;
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translate3d(0%, 0, 0);
position: fixed;
top: 0;
left: 0;
opacity: 1;
}
to {
transform: translate3d(-100%, 0, 0);
position: fixed;
top: 0;
left: 0;
opacity: 1;
}
}
.slide-left-enter-active{
position: fixed;
top: 0;
left: 0%;
100vw;
height: 100vh;
animation: slideInLeft .2s linear forwards;
}
.slide-left-leave-active{
position: fixed;
top: 0;
left: 0%;
100vw;
height: 100vh;
animation: slideInRight .2s linear forwards;
}
/*向右滑动*/
@keyframes slideOutLeft {
from {
transform: translate3d(-100%, 0, 0);
position: fixed;
top: 0;
left: 0;
opacity: 1;
}
to {
transform: translate3d(0%, 0, 0);
position: fixed;
top: 0;
left: 0;
opacity: 1;
}
}
@keyframes slideOutRight {
from {
transform: translate3d(0%, 0, 0);
position: fixed;
top: 0;
left: 0;
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0);
position: fixed;
top: 0;
left: 0;
opacity: 1;
}
}
.slide-right-enter-active{
position: fixed;
top: 0;
left: 0%;
100vw;
height: 100vh;
animation: slideOutLeft .2s linear forwards;
}
.slide-right-leave-active{
position: fixed;
top: 0;
left: 0%;
100vw;
height: 100vh;
animation: slideOutRight .2s linear forwards;
}
 

---本文转自：https://blog.csdn.net/qq_33737087/article/details/88293487

//有兴趣可以康康