使用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 相关文章推荐
JScript的条件编译
May 29 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
JS实现拼图游戏
Jan 29 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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连接Oracle数据库
2006/10/09 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
微信小程序实现单选功能
2018/10/30 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python config文件的读写操作示例
2019/09/27 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
护士自我评价范文
2014/01/25 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
工作收入证明模板
2014/10/10 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
浅谈JS的原型和原型链
2021/06/04 Javascript
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android