為了增加用戶體驗再姑，在切換路由時可加動態(tài)的過渡效果。
應(yīng)用場景：
image.png
切換如上頁面的底部導(dǎo)航欄元镀，添加 動畫過渡效果。
1栖疑、樣式
/*路由切換 animation start */
.slide-left-enter-active,
.slide-left-leave-active {
transition: 0.3s transform ease;
backface-visibility: hidden;
perspective: 1000;
}
.slide-left-enter {
transform: translate3d(-100%, 0, 0);
}
.slide-left-enter-to,
.slide-left-leave {
transform: translate3d(0%, 0, 0);
}
.slide-left-leave-to {
transform: translate3d(100%, 0, 0);
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: 0.3s all ease-out;
backface-visibility: hidden;
perspective: 1000;
}
.slide-right-enter {
transform: translate3d(100%, 0, 0);
}
.slide-right-enter-to,
.slide-right-leave {
transform: translate3d(0, 0, 0);
}
.slide-right-leave-to {
transform: translate3d(-100%, 0, 0);
}
/*路由切換 animation end */
2、路由配置
路由配置時遇革，給路由對象加上meta屬性，并在meta中加index屬性和值萝快，后端監(jiān)聽需要需要用該值來判斷
routes: [{
path: '/',//重定向
redirect: '/home',
meta: {
index:1
}
}, {
// 首頁
name: 'home',
path: '/home',
meta: {
index:2
},
component: Home,
}, {
// 分類
name: 'classify',
path: '/classify',
meta: {
index:3
},
component: Classify
}, {
// 我的
name: 'mine',
path: '/mine',
meta: {
index:4
},
component: Mine
},{
// 吃飯吧
name:'eat',
path:'/eat',
meta: {
index:7
},
component:Eat
},{
// 購物車
name:'cart',
path:'/cart',
component:Cart,
meta: { requiresAuth: true,index:10 }
}]
3、在App.vue中添加動態(tài)指令并監(jiān)聽路由
（1）給路由添加動態(tài)指令 <transition> </transition>揪漩，并給個名字
<div id="app">
<transition :name="transitionName">
<router-view></router-view>
</transition>
<Footer></Footer>
</div>
（2）監(jiān)聽路由
根據(jù)路由對象的index值來進行比較，給當前路由頁面動態(tài)指令添加對應(yīng)的類名
watch:{
$route(to,from){
console.log(to,77);
console.log(from,88);
const fromIndex=from.meta.index
const toIndex=to.meta.index
if (toIndex > fromIndex) {
this.transitionName = 'slide-right'
} else if (toIndex < fromIndex) {
this.transitionName = 'slide-left'
} else {
this.transitionName = ''
}
}
}
