菜单

vue路由前行后退动漫功用的兑今世码_vue,router转场动漫的实例代码_vue

2020年4月2日 - 澳门太阳娱乐手机登录

vue-route-transition

Vue+WebPack+HBuilder 项目记录

vue router 切换动漫

花色搭建达成了,不过由于是单页应用嵌入HBuilder的时候不恐怕利用它的转场动漫,于是找到了vue的转场动漫写法,使体验与应用软件周边,在这里记录;

特性

1.第一大家要监听路由然后剖断其是向上如故落后,来落实不一样的动漫片

模仿前行后退动画 基于css3通畅动漫基于sessionStorage,页面刷新不影响路由记录
路由懒加载,重返可记下滚动条地方 前行后退的判定与路由路线准则无关帮忙肆意基于Vue的UI框架

export default { name: 'app', data () { return { transitionName: 'slide-left' } }, watch: { '$route'  { const toDepth = to.path.split.length const fromDepth = from.path.split.length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } }}

澳门太阳娱乐手机登录,demo

2.template

在线预览

3.css;校勘css获得分裂的成效。

说明

 .child-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; transition: all .6s cubic-bezier;}.slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate; transform: translate;}.slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate; transform: translate;}

vue-route-transition 担任动画 router-layout 负担页面制版。
主即便扫地以尽transform动漫,position:fixed十分难点

上边动画可视作差别级页面包车型客车转场动画,上边可作为同级页面转场动漫,没有必要监听路由

像在此之前一导致用

1.template

npm i vue-route-transition --save

2.css

import RouteTransition from 'vue-route-transition'Vue.use
.slide-fade-enter-active { transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease;}.slide-fade-leave-active { transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease;}.slide-fade-enter{ transform: translateX; -webkit-transform: translateX; -moz-transform: translateX; -ms-transform: translateX; -o-transform: translateX; opacity: 0;}.slide-fade-leave-active { opacity: 0;}

页面,借使有吸附底部,或吸附尾部成分的状态下才必要利用router-layout组件

如上那篇vue+vue-router转场动漫的实例代码正是作者分享给我们的全体内容了,希望能给我们叁个参阅,也指望大家多多指教脚本之家。

   头部导航    ...  底部按钮  

Github

开源合计

本项目基于 MIT 商业事务,请随便地享用和参加开源。

总结

上述所述是小编给大家介绍的vue路由前进后退动漫作用的落实代码,希望对大家具备助于,要是我们有其他疑问请给自家留言,作者会及时还原大家的。在这里也极其多谢大家对剧本之家网址的扶助!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图