vue+vue-router转场动画的实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue+vue-router转场动画的实例代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1907字,纯文字阅读大概需要3分钟。
内容图文
![vue+vue-router转场动画的实例代码](/upload/InfoBanner/zyjiaocheng/336/0752a7dc042c4aa78b88bfb3b37a3459.jpg)
Vue+WebPack+HBuilder 项目记录
项目搭建完毕了,但是由于是单页应用嵌入HBuilder的时候无法利用它的转场动画,于是找到了vue的转场动画写法,使体验与APP靠近,在此记录;
1.首先我们要监听路由然后判断其是前进还是后退,来实现不同的动画
export default { name: 'app', data () { return { transitionName: 'slide-left' } }, watch: { '$route' (to, from) { const toDepth = to.path.split('/').length const fromDepth = from.path.split('/').length this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' } } }
2.template
<transition :name="transitionName"> <router-view class="child-view"></router-view> </transition>
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(.55,0,.1,1); } .slide-left-enter, .slide-right-leave-active { opacity: 0; -webkit-transform: translate(-80px, 0); transform: translate(-80px, 0); } .slide-left-leave-active, .slide-right-enter { opacity: 0; -webkit-transform: translate(100%, 0); transform: translate(100%, 0); }
上面动画可作为不同级页面的转场动画,下面可作为同级页面转场动画,无需监听路由
1.template
<transition name="slide-fade"> <router-view></router-view> </transition>
2.css
.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(20px); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); opacity: 0; } .slide-fade-leave-active { opacity: 0; }
以上这篇vue+vue-router转场动画的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的vue+vue-router转场动画的实例代码全部内容,希望文章能够帮你解决vue+vue-router转场动画的实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。