vue页面切换过渡transition效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue页面切换过渡transition效果,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1583字,纯文字阅读大概需要3分钟。
内容图文
首先得有你想要的过渡效果css代码:
.vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 500ms; height: 100%; position: absolute; backface-visibility: hidden; perspective: 1000; } .vux-pop-out-enter { opacity: 0; transform: translate3d(-100%, 0, 0); } .vux-pop-out-leave-active { opacity: 0; transform: translate3d(100%, 0, 0); } .vux-pop-in-enter { opacity: 0; transform: translate3d(100%, 0, 0); } .vux-pop-in-leave-active { opacity: 0; transform: translate3d(-100%, 0, 0); }
给你想要过渡页面的父元素给上这样的样式:
.router-view{ width: 100%; position: absolute; -webkit-transition: all .3s cubic-bezier(.55,0,.1,1); -moz-transition: all .3s cubic-bezier(.55,0,.1,1); -ms-transition: all .3s cubic-bezier(.55,0,.1,1); -o-transition: all .3s cubic-bezier(.55,0,.1,1); transition: all .3s cubic-bezier(.55,0,.1,1); height:100%; }
html代码是这样的:
<template> <div id="app"> <transition :name="transitionName"> <router-view class="router-view"></router-view> </transition> </div> </template>
js代码是这样的:
export default { name: 'app', data(){ return { transitionName:'vux-pop-in' } }, }
这里的transitionName根据自己的需要去改变,我是监听路由去改变是vux-pop-in还是vux-pop-out的。
watch:{ $route(to, from) { if(to.meta.index > from.meta.index){ this.transitionName = 'vux-pop-in'; }else{ this.transitionName = 'vux-pop-out'; } } }
这里当然要个路由这是参数index,分级。
总结
以上所述是小编给大家介绍的vue页面切换过渡transition效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
内容总结
以上是互联网集市为您收集整理的vue页面切换过渡transition效果全部内容,希望文章能够帮你解决vue页面切换过渡transition效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。