使用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 事件系统
Jul 22 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JS截取字符串实例详解
Nov 24 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 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
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
详谈javascript精度问题与调整
2017/07/08 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
vue内置指令详解
2018/04/03 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
python中正则的使用指南
2016/12/04 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
Python GUI编程完整示例
2019/04/04 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
快速查找Python安装路径方法
2020/02/06 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
财务总经理岗位职责
2014/02/16 职场文书
购房意向书范本
2014/04/01 职场文书
初三学习计划书范文
2014/04/30 职场文书
党建工作整改措施
2014/10/28 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang