基于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:;
} .view-in-enter-active,
.view-out-leave-active {
position: absolute;
top:;
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;
}
基于Vue的页面切换左右滑动效果的更多相关文章
- Android开发之ViewPager实现多页面切换及动画效果(仿Android的Launcher效果)
Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下: 1.Vi ...
- vue项目页面切换到默认显示顶部
页面切换到默认显示顶部 方法一 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页 ...
- vue中使用better-scroll实现滑动效果
1.安装:npm install better-scroll 2.引入:import BetterScrol from "better-scroll"; 1.滚动效果 better ...
- 实现页面切换(动画效果实现,不用ViewPager)
源代码地址 http://download.csdn.net/detail/u013210620/8791687 先看主页面布局activity_main <?xml version=" ...
- 基于jquery实现页面loading加载效果
实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...
- Vue -- 项目报错整理(2):IE报错 - ‘SyntaxError:strict 模式下不允许一个属性有多个定义‘ ,基于vue element-ui页面跳转坑的解决
- Vue完成页面切换中加载数据
created() { // 拿到路由传递来的car主键 let pk = this.$route.query.pk || this.$route.params.pk; // 主键不存在,就直接结束方 ...
- 基于Vue、Bootstrap的Tab形式的进度展示
最近基于Vue.Bootstrap做了一个箭头样式的进度展示的单页应用,并且支持了对于一个本地JS文件的检索,通过这个单页应用,对于Vue的理解又深入了一些.在这里把主要的代码分享出来. 本单页应用实 ...
- Android之怎样实现滑动页面切换【Fragment】
Fragment 页面切换不能滑动 所以对于listview 能够加入的左右滑动事件 .不会有冲突比如(QQ的好友列表的删除) Fragment 和viewpager 的差别 Viewpager ...
随机推荐
- Webpack 2 视频教程 009 - 配置 ESLint 实现代码规范自动测试 (上)
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- 给yii架构的网站做Android客户端
网站未预留接口.给这类网站制作客户端就是模拟网页发送的post和get请求,然后获取服务器返回的数据. 1.在做客户端时先使用httpwatch分析浏览器发送的get和post请求的内容和URL.分析 ...
- K:常见的正则表达式
@装载自:http://zxin.cnblogs.com/ 平时对字符串进行校验和处理的时候难免会用到正则表达式,通常采用的方式是去网上寻找相关的正则表达式,之后copy下来进行修改,以使其满足自己的 ...
- Python文件读写 - 文件r+ a+ open读写实际表现[示例]
先说结论: 文件r+ open: 1. write()不能实现插入写,它总是覆盖写或附加写: 2. 如果文件一打开即write(),则从开头覆盖写; 3. 如果文件一打开,用f.seek()指定文件指 ...
- Git操作流程,基本命令演示
任务列表: 有一个中央库Center,和三个工作站A,B,C. 初始化时,代码存放在中央库中,A,B,C三个工作站开始工作之前都要首先从中央库克隆一份代码到本地. 第一个任务:A和B合作修复一个缺陷, ...
- ASP.NET Core读取AppSettings
http://www.tuicool.com/articles/rQruMzV 今天在把之前一个ASP.NET MVC5的Demo项目重写成ASP.NET Core,发现原先我们一直用的Configu ...
- Python学习_02_数字和运算
python具有强大的科学运算功能,python由于支持更加强大的面向对象和动态特性,相比R语言.matlab.mathmatic等传统的科学计算工具具有非常大的优势. Python的数字 pytho ...
- 《UNIX环境高级编程》第七章进程环境
7.2 main函数 1.C程序总是从main函数开始执行的,原型:int main(int argc,char *argv[]);argc是命令行参数的个数argc是指向参数的各个指针所构成的数组2 ...
- Winform跨窗体操作控件(使用委托)
Winform跨窗体操作控件是winform开发中很常见的形式,最常见且简单有效的方式便是使用委托的方式来进行操作,下面我将通过一个小实例来说明如何使用委托跨窗体实现控件操作. 实例介绍:两个窗体,F ...
- 基于vue2+vuex+vue-router+sass+webpack的网易云音乐
[本博客为原创:http://www.cnblogs.com/HeavenBin/] 前言: 这段时间写的一个项目,供给大家互相学习,有什么疑问可以issues我. 源码地址:https://git ...