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 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
js中日期的加减法
May 06 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 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
对Session和Cookie的区分与解释
2007/03/16 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
公务员年总结的自我评价
2013/10/25 职场文书
小学教师培训方案
2014/06/09 职场文书
世博会口号
2014/06/20 职场文书
超市促销活动总结
2014/07/01 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
Python实现简繁体转换
2021/06/07 Python