好资源导航 » 文章资讯 » vue页面切换过渡transition效果

vue页面切换过渡transition效果

2023-09-07 18:57:06 63

首先得有你想要的过渡效果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:all500ms;
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.3scubic-bezier(.55,0,.1,1);
-moz-transition:all.3scubic-bezier(.55,0,.1,1);
-ms-transition:all.3scubic-bezier(.55,0,.1,1);
-o-transition:all.3scubic-bezier(.55,0,.1,1);
transition:all.3scubic-bezier(.55,0,.1,1);
height:100%;
}

html代码是这样的：

js代码是这样的：

exportdefault{
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效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

vue页面切换过渡transition效果

热门推荐

随机推荐