基于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 12 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
Vue集成Iframe页面的方法示例
Dec 12 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 json与xml序列化/反序列化
2013/10/28 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
学习YUI.Ext基础第一天
2007/03/10 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
管理失职检讨书
2014/02/12 职场文书
公司经理聘任书
2014/03/29 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
muduo TcpServer模块源码分析
2022/04/26 Redis
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers
Windows server 2016服务器基本设置
2022/08/14 Servers