基于Vue实现页面切换左右滑动效果
作者:嘉爷 时间:2023-07-02 16:55:10
基于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;
}
标签:Vue,页面切换,滑动
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Vue自定义可以选择日期区间段的日历插件
2024-05-11 09:11:19
![](https://img.aspxhome.com/file/2023/5/126535_0s.jpg)
深入浅出MySQL双向复制技术
2009-03-25 15:40:00
Django 生成登陆验证码代码分享
2021-07-31 06:48:21
![](https://img.aspxhome.com/file/2023/8/79398_0s.jpg)
Go web入门Go pongo2模板引擎
2023-07-22 22:16:43
![](https://img.aspxhome.com/file/2023/7/99647_0s.png)
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2021-09-09 16:49:42
![](https://img.aspxhome.com/file/2023/6/91896_0s.jpg)
Python3连接MySQL(pymysql)模拟转账实现代码
2024-01-21 09:37:45
Python如何生成xml文件
2022-07-25 06:00:33
python批量添加zabbix Screens的两个脚本分享
2022-07-21 02:17:28
Python处理键映射值操作详解
2021-03-21 03:14:53
![](https://img.aspxhome.com/file/2023/5/105255_0s.png)
ACCESS的参数化查询,附VBSCRIPT(ASP)和C#(ASP.NET)函数第1/2页
2024-01-25 10:05:42
Python socket网络编程TCP/IP服务器与客户端通信
2023-09-13 01:46:02
基于idea操作hbase数据库并映射到hive表
2024-01-19 23:22:57
![](https://img.aspxhome.com/file/2023/7/110867_0s.png)
SQL中 patindex函数的用法详解
2024-01-23 14:55:39
python3.6使用tkinter实现弹跳小球游戏
2022-04-09 14:37:13
Python垃圾回收机制三种实现方法
2023-02-22 00:24:42
![](https://img.aspxhome.com/file/2023/2/82832_0s.jpg)
golang实践-第三方包为私有库的配置方案
2023-06-25 06:05:32
![](https://img.aspxhome.com/file/2023/3/92033_0s.jpg)
itchat接口使用示例
2022-09-01 05:16:36
Oracle 11g安装错误提示未找到wfmlrsvcapp.ear的解决方法
2023-07-14 14:31:52
![](https://img.aspxhome.com/file/2023/6/64466_0s.jpg)
phpmyadmin 数据导入导出问题
2007-08-06 15:23:00
python必备库Matplotlib画图神器
2021-03-29 21:16:08
![](https://img.aspxhome.com/file/2023/1/123461_0s.png)