html页面切换过渡,vue页面切换过渡transition效果

首先得有你想要的过渡效果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效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

时间： 2018-10-08