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

基于Vue的页面切换左右滑动效果，具体内容如下

HTML文本页面：

JS定义代码：定义在全局js文件里面

{ const list = ['home','group','user'] // 将需要切换效果的路由名称组成一个数组 const toName = to.name // 即将进入的路由名字 const fromName = from.name // 即将离开的路由名字 const toIndex = list.indexOf(toName) // 进入下标 const fromIndex = list.indexOf(fromName) // 离开下标 let direction = ''

if (toIndex > -1 && fromIndex > -1) { // 如果下标都存在
if (toIndex < fromIndex) { // 如果进入的下标小于离开的下标，那么是左滑
direction = 'left'
} else {
direction = 'right' // 如果进入的下标大于离开的下标，那么是右滑
}
}

store.state.viewDirection = direction //这里使用vuex进行赋值

return next()
})

在App.vue文件中，进行计算属性：

direction () {
const viewDir = this.$store.state.viewDirection
let tranName = ''

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

return tranName

},},

css3进行动画效果定义：使用sass

待定义引入样式文件：

<div class="jb51code">
<pre class="brush:css;">
// Variables
$AnimateHook: "animated";
$AnimateDuration: 0.8s;

// Mixins

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

// Modifier for infinite repetition
&.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

}

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

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

}

@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%,0);
}

}

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

@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%,0);
transform: translate3d(100%,0);
}

}

@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%,0);
}

}

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

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

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

}

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

}

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

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

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

}

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

}

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

@-webkit-keyframes inRight {
0% {
-webkit-transform: translate3d(100%,0)
}

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

}

@keyframes inRight {
0% {
-webkit-transform: translate3d(100%,0)
}

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

}

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

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

}

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

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

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

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

猜你在找的Vue相关文章