使用vue-router切换页面时实现设置过渡动画


Posted in Javascript onOctober 31, 2019

背景

今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来.

实现难点

如何判断切换路由时是前进还是后退

每次切换时向左向右切换动画如何实现

解决方案

我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.

router/index.js

import VueRouter from 'vue-router'
import Home from '../components/home/home'
import User from '../components/user/user'

var router = new VueRouter({
  routes:[{
    name:'test',
    path:'/',
    meta:{index:0},//meta对象的index用来定义当前路由的层级,由小到大,由低到高
    component:{
      template:'<div>test</div>'
    }
  },{
    name:'home',
    path:'/home',
    meta:{index:1},
    component:Home
  },{
    name:'user',
    path:'/user/:id',
    meta:{index:2},
    component:User
  }]
});

监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退.

<template>
 <div id="app">
  <transition :name="transitionName">  
   <router-view></router-view>
  </transition>
 </div>
</template>

<script>
export default {
 name: 'App',
 data(){
   return {
     transitionName:''
   }
 },
 watch: {//使用watch 监听$router的变化
  $route(to, from) {
   //如果to索引大于from索引,判断为前进状态,反之则为后退状态
   if(to.meta.index > from.meta.index){
   //设置动画名称
    this.transitionName = 'slide-left';
   }else{
    this.transitionName = 'slide-right';
   }
  }
 }
}
</script>

编写slide-left 和 slide-right 类的动画

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
 will-change: transform;
 transition: all 500ms;
 position: absolute;
}
.slide-right-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}

示例

CSDN markdown 禁用了iframe, 有翻墙工具的可以点击codesandbox demo.

以上这篇使用vue-router切换页面时实现设置过渡动画就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
js计算页面刷新的次数
Jul 20 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 #Javascript
vue弹出框组件封装实例代码
Oct 31 #Javascript
使用zrender.js绘制体温单效果
Oct 31 #Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 #Javascript
selenium+java中用js来完成日期的修改
Oct 31 #Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 #Javascript
vue项目出现页面空白的解决方案
Oct 31 #Javascript
You might like
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
php绘制一条弧线的方法
2015/01/24 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
vue组件name的作用小结
2018/05/23 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
python发送邮件接收邮件示例分享
2014/01/21 Python
python中的sort方法使用详解
2014/07/25 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
python线程中同步锁详解
2018/04/27 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
大学生的四年学习自我评价
2013/12/13 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
JavaScript实现优先级队列
2021/12/06 Javascript