基于Vue的页面切换左右滑动效果，具体内容如下
HTML文本页面：
<template>
<div id="app>
<transition :name="direction" mode="out-in"> <!--动态获得transition 的name值-->
<router-view class="app-view" wechat-title></router-view>
</transition>
</div>
</template>JS定义代码：定义在全局js文件里面
router.beforeEach((to, from, next) => {
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文件中，进行计算属性：
computed: { 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
待定义引入样式文件：
// 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, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
