Vue2.0 页面切换左右滑动效果
<transition :name="transitionName"mode="out-in"><router-viewclass="child-view"></router-view></transition>data(){r
·
<transition :name="transitionName" mode="out-in">
<router-view class="child-view"></router-view>
</transition>
data(){
return{
transitionName:'slide-left'
}
},
watch:{
'$route' (to, from) {
let isBack = this.$router.isBack;
if( isBack ){
this.transitionName = 'slide-right'
this.$router.isBack = false;
}else{
this.transitionName = 'slide-left'
this.$router.isBack = true;
}
}
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
transform: translate(10%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
transform: translate(-10% 0);
}
更多推荐
已为社区贡献10条内容
所有评论(0)