vue路由前进后退动画效果的实现代码


Posted in Javascript onDecember 10, 2018

vue-route-transition

vue router 切换动画

特性

  • 模拟前进后退动画
  • 基于css3流畅动画
  • 基于sessionStorage,页面刷新不影响路由记录
  • 路由懒加载,返回可记录滚动条位置
  • 前进后退的判断与路由路径规则无关
  • 支持任意基于Vue的UI框架

demo

vue路由前进后退动画效果的实现代码 

手机扫码

vue路由前进后退动画效果的实现代码

在线预览

说明

配套包含两个组件

  • vue-route-transition 负责动画
  • router-layout 负责页面排版。 主要是解决transform动画,position:fixed异常问题

像往常一样使用

npm i vue-route-transition --save

main.js

import RouteTransition from 'vue-route-transition'
Vue.use(RouteTransition)

App.vue

<template>
 <vue-route-transition id="app">
 </vue-route-transition>
</template>

页面,如果有吸附头部,或吸附底部元素的情况下才需要使用router-layout组件

<template>
 <router-layout>
 <header slot="header">
  头部导航
 </header>
 <div></div>
 <div></div>
 ...
 <footer slot="footer">
  <button>底部按钮</button>
 </footer>
 </router-layout>
</template>

参考文件

Github

github

开源协议

本项目基于 MIT 协议,请自由地享受和参与开源。

总结

以上所述是小编给大家介绍的vue路由前进后退动画效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
angularJS深拷贝详解
Mar 23 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 #Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 #Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 #Javascript
express 项目分层实践详解
Dec 10 #Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 #Javascript
微信小程序分享海报生成的实现方法
Dec 10 #Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
You might like
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
JQuery live函数
2010/12/24 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
Python实现针对中文排序的方法
2017/05/09 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
中医临床专业自我鉴定范文
2014/01/15 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
AJAX学习笔记
2021/05/18 Javascript
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript