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 中介者模式实例
Dec 16 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
Position属性之relative用法
Dec 14 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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
PHP语法速查表
2007/01/02 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
自己动手封装一个React Native多级联动
2018/09/19 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
Python运算符重载用法实例分析
2015/06/01 Python
python中的set实现不重复的排序原理
2018/01/24 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
详解python中docx库的安装过程
2019/11/08 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
认真学习保证书
2015/02/26 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
Python利用capstone实现反汇编
2022/04/06 Python
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers