基于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 相关文章推荐
动态样式类封装JS代码
Sep 02 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
react中的DOM操作实现
Jun 30 Javascript
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里的单例类写法实例
2015/06/25 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP函数积累总结
2019/03/19 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python基础之函数用法实例详解
2014/09/10 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python中format()函数的简单使用教程
2018/03/14 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
python 自动批量打开网页的示例
2019/02/21 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
设备管理实施方案
2014/05/31 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
施工现场安全管理制度
2015/08/05 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书