基于Vue实现页面切换左右滑动效果

2023-09-26 20:52:06 55
基于Vue的页面切换左右滑动效果，具体内容如下
HTML文本页面：
JS定义代码：定义在全局js文件里面
router.beforeEach((to,from,next)=>{
constlist=['home','group','user']//将需要切换效果的路由名称组成一个数组
consttoName=to.name//即将进入的路由名字
constfromName=from.name//即将离开的路由名字
consttoIndex=list.indexOf(toName)//进入下标
constfromIndex=list.indexOf(fromName)//离开下标
letdirection=''

if(toIndex>-1&&fromIndex>-1){//如果下标都存在
if(toIndex
在App.vue文件中，进行计算属性：
computed:{

direction(){
constviewDir=this.$store.state.viewDirection
lettranName=''

if(viewDir==='left'){
tranName='view-out'
}elseif(viewDir==='right'){
tranName='view-in'
}else{
tranName='fade'
}

returntranName
},
},

css3进行动画效果定义：使用sass
待定义引入样式文件：
//Variables
$AnimateHook:"animated";
$AnimateDuration:0.8s;

//Mixins

//BaseStyle
.#{$AnimateHook}{
-webkit-animation-duration:$AnimateDuration;
animation-duration:$AnimateDuration;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;

//Modifierforinfiniterepetition
&.infinite{
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}

}

//Slide
@-webkit-keyframesslideInLeft{
from{
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
visibility:visible;
}

to{
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

}

@keyframesslideInLeft{
from{
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
visibility:visible;
}

to{
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

}

.slideInLeft{
-webkit-animation-name:slideInLeft;
animation-name:slideInLeft;
}

@-webkit-keyframesslideInRight{
from{
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0);
visibility:visible;
}

to{
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

}

@keyframesslideInRight{
from{
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0);
visibility:visible;
}

to{
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

}

.slideInRight{
-webkit-animation-name:slideInRight;
animation-name:slideInRight;
}

@-webkit-keyframesslideOutLeft{
from{
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

to{
visibility:hidden;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
}

}

@keyframesslideOutLeft{
from{
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

to{
visibility:hidden;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
}

}

.slideOutLeft{
-webkit-animation-name:slideOutLeft;
animation-name:slideOutLeft;
}

@-webkit-keyframesslideOutRight{
from{
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

to{
visibility:hidden;
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0);
}

}

@keyframesslideOutRight{
from{
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}

to{
visibility:hidden;
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0);
}

}

.slideOutRight{
-webkit-animation-name:slideOutRight;
animation-name:slideOutRight;
}

@-webkit-keyframesinRight{
0%{
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0)
}

to{
-webkit-transform:translateZ(0);
transform:translateZ(0)
}

}

@keyframesinRight{
0%{
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0)
}

to{
-webkit-transform:translateZ(0);
transform:translateZ(0)
}

}

@-webkit-keyframesoutLeft{
0%{
-webkit-transform:translateZ(0);
transform:translateZ(0)
}

to{
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0)
}

}

@keyframesoutLeft{
0%{
-webkit-transform:translateZ(0);
transform:translateZ(0)
}

to{
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0)
}

}

定义进入与离开的动画过渡：
.fade-enter-active,
.fade-leave-active{
transition:all.2sease;
}

.fade-enter,
.fade-leave-active{
opacity:0;
}

.view-in-enter-active,
.view-out-leave-active{
position:absolute;
top:0;
width:100%;
padding-top:px2rem($titbarHeight);
-webkit-animation-duration:.3s;
animation-duration:.3s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

.view-in-enter-active{
-webkit-animation-name:inRight;
animation-name:inRight;
}

.view-out-leave-active{
-webkit-animation-name:outLeft;
animation-name:outLeft;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
基于Vue实现页面切换左右滑动效果

热门推荐

随机推荐
