使用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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
详解小程序循环require之坑
Mar 08 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
Vue使用axios引起的后台session不同操作
Aug 14 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中设置index.php文件为只读的方法
2013/02/06 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
js word表格动态添加代码
2010/06/07 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python修改字典内key对应值的方法
2015/07/11 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
宿舍违规检讨书
2014/01/12 职场文书
班主任对学生的评语
2014/04/26 职场文书
学校食堂标语
2014/10/06 职场文书
环保建议书范文
2015/09/14 职场文书