需要在 < router-view> 标签的外部添加 < transition> 标签
< router-view> 标签必须为双标签< router-view>< /router-view>
<transition :name="transitionName">
<router-view></router-view>
</transition>
过渡的css类名:
v-enter 进入过渡的开始状态
v-enter-active 进入活动状态
v-enter-to 进入的结束状态
v-leave 离开过渡的开始状态
v-leave-active 离开活动状态
v-leave-to 离开结束状态
.slide-left-enter {
opacity:0;
}
.slide-left-leave{
opacity:1;
}
.slide-left-enter-active{
transition:opacity 2s;
}
.slide-left-leave-active{
opacity:0;
transition:opacity .5s;
}
.slide-right-enter {
opacity:0;
}
.slide-right-leave{
opacity:1;
}
.slide-right-enter-active{
transition:opacity 2s;
}
.slide-right-leave-active{
opacity:0;
transition:opacity .5s;
}
路由里面加个判断动画是左还是右
比如当前路由是index1 要去的是index2 watch就会监听到然后给出相对应动画的css
meta: { index: 1 }
watch监听判断左右跳转
watch: {//使用watch 监听$router的变化
$route(to, from) {
//如果to索引大于from索引,判断为前进状态,反之则为后退状态
if(to.meta.index > from.meta.index){
this.transitionName = 'slide-left';
}else{
this.transitionName = 'slide-right';
}
}
},