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 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
jquery validation验证表单插件
Jan 07 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
JS如何生成动态列表
Sep 22 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 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
How do I change MySQL timezone?
2008/03/26 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
Django stark组件使用及原理详解
2019/08/22 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
跟单文员岗位职责
2014/01/03 职场文书
2014年新生军训方案
2014/05/01 职场文书
质量安全标语
2014/06/07 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
英语感谢信范文
2015/01/20 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python