内容简介:配套包含两个组件main.js
- 模拟前进后退动画
- 基于css3流畅动画
- 基于sessionStorage,页面刷新不影响路由记录
- 返回可记录滚动条位置
- 前进后退的判断与路由路径规则无关
- 支持任意基于Vue的UI框架
demo
手机扫码
说明
配套包含两个组件
-
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>
复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Head First HTML5 Programming
Eric Freeman、Elisabeth Robson / O'Reilly Media / 2011-10-18 / USD 49.99
What can HTML5 do for you? If you're a web developer looking to use this new version of HTML, you might be wondering how much has really changed. Head First HTML5 Programming introduces the key featur......一起来看看 《Head First HTML5 Programming》 这本书的介绍吧!