基于Vue实现页面切换左右滑动效果
程序员文章站
2022-11-25 11:12:40
基于vue的页面切换左右滑动效果，具体内容如下
html文本页面：
基于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);
transform: translate3d(0, 0, 0);
}
}
.slideinleft {
-webkit-animation-name: slideinleft;
animation-name: slideinleft;
}
@-webkit-keyframes slideinright {
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 slideinright {
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-keyframes slideoutleft {
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);
}
}
@keyframes slideoutleft {
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-keyframes slideoutright {
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);
}
}
@keyframes slideoutright {
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-keyframes inright {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
to {
-webkit-transform: translatez(0);
transform: translatez(0)
}
}
@keyframes inright {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 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, 0);
transform: translate3d(100%, 0, 0)
}
}
@keyframes outleft {
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 .2s ease;
}
.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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： Node.js 事件循环详解及实例
推荐阅读
-
Android使用TabLayou+fragment+viewpager实现滑动切换页面效果
-
js移动端滑动事件（js实现左右滑动页面效果）
-
Android编程实现ViewPager多页面滑动切换及动画效果的方法
-
基于vue-cli 路由 实现类似tab切换效果（vue 2.0）
-
Vue实现移动端页面切换效果【推荐】
-
js移动端滑动事件（js实现左右滑动页面效果）
-
Android使用TabLayou+fragment+viewpager实现滑动切换页面效果
-
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
-
基于JS实现翻书效果的页面切换样式
-
基于JS实现翻书效果的页面切换样式