<template>
<div id="app">
<transition :name="transitionName">
<router-view></router-view>
</transition>
</div>
</template>
<script>
import './assets/js/fontSize'
export default {
name:"App",
data(){
return{
transitionName:""
}
},
watch:{
$route(to, from) {
//将不想有过渡动画效果的部分路由写进判断条件中
if(to.path !=='/' && to.path !=='/' && to.path !=='/' || from.path !=='/' && from.path !=='/' && from.path !=='/'){
//如果to索引大于from索引,判断为前进状态,反之则为后退状态
if(to.meta.index < from.meta.index){
//设置动画名称
this.transitionName = 'slide-left';
}else if(to.meta.index > from.meta.index){
this.transitionName = 'slide-right';
}else if(to.meta.index == 99){
this.transitionName =""
}
}else{
this.transitionName =""
}
}
}
}
</script>
路由切换的效果主要是通过vue提供的transition标签来实现的。如果你想要更多的过渡的效果,你可以使用Animation(好像是这个,哈哈哈哈哈哈哈哈,有点忘了)。