基于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常见注意事项
Jan 01 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
javascript中setInterval的用法
Jul 19 Javascript
简单谈谈json跨域
Mar 13 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 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
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
php中使用sftp教程
2015/03/30 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
浅谈python numpy中nonzero()的用法
2018/04/02 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
python用700行代码实现http客户端
2021/01/14 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
微信搭讪开场白
2015/05/28 职场文书
导游词之潮音寺
2019/09/26 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python