使用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基础的动画教程,直观易懂
Jan 10 Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
javascript string字符串优化问题
Jul 31 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 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的基本常识小结
2013/07/05 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
jQuery select控制插件
2009/08/17 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
员工培训邀请函
2014/01/11 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
python使用torch随机初始化参数
2022/03/22 Python