使用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 相关文章推荐
js下用层来实现select的title提示属性
Feb 23 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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
MySQL相关说明
2007/01/15 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php实现的二分查找算法示例
2017/06/20 PHP
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
matplotlib中legend位置调整解析
2017/12/19 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python脚本后台执行方式
2019/12/21 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
python em算法的实现
2020/10/03 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
师说教学反思
2014/02/07 职场文书
产假请假条
2014/04/10 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
护理工作心得体会
2016/01/22 职场文书
数学复习课教学反思
2016/02/18 职场文书
诚信高考倡议书
2019/06/24 职场文书
五年级作文之想象作文
2019/10/30 职场文书