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


Posted in Javascript onJune 29, 2020

基于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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
webpack打包node.js后端项目的方法
Mar 10 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
VUE实现表单元素双向绑定(总结)
Aug 08 #Javascript
ES6模块化的import和export用法方法总结
Aug 08 #Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 #Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 #Javascript
vue-quill-editor实现图片上传功能
Aug 08 #Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 #Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 #Javascript
You might like
PHP垃圾回收机制简单说明
2010/07/22 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php中动态变量用法实例
2015/06/10 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
js模仿jquery的写法示例代码
2013/06/16 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python实现猜数字小游戏
2020/03/24 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
pycharm快捷键汇总
2020/02/14 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
什么是python的自省
2020/06/21 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
学校元旦晚会开场白
2014/12/14 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
《雷雨》教学反思
2016/02/20 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python