路由跳轉(zhuǎn)添加過渡動效
<transition :name="transitionName">
<router-view></router-view>
</transition>
- JS控制動畫類是
slide-right還是slide-left:
export default {
data(){
return{
transitionName:"",
}
},
// 監(jiān)聽,當(dāng)路由發(fā)生變化的時候執(zhí)行
watch:{
$route(to,from){
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
<style lang="scss">
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 500ms;
position:absolute;
}
.slide-right-enter {
opacity: 0;
transform: translate(-100%);
}
.slide-right-leave-active {
opacity: 0;
transform: translateX(100%);
}
.slide-left-enter {
opacity: 0;
transform: translateX(100%);
}
.slide-left-leave-active {
opacity: 0;
transform: translateX(-100%);
}
</style>
