基于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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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脚本数据库功能详解(中)
2006/10/09 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
javascript常用的方法整理
2015/08/20 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
通过自学python能找到工作吗
2020/06/21 Python
keras输出预测值和真实值方式
2020/06/27 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
遥感技术与仪器求职信
2014/02/22 职场文书
超市创业计划书
2014/04/24 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
党员民主评议个人总结
2014/10/20 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
公积金具结保证书
2015/05/11 职场文书
建党伟业的观后感
2015/06/01 职场文书