扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
首先得有你想要的过渡效果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代码是这样的：
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效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网