???????在移動(dòng)端原生應(yīng)用中历造，頁(yè)面之間的跳轉(zhuǎn)會(huì)以“滑動(dòng)”的方式進(jìn)行切換岛蚤，展示效果極佳闹炉，那么能不能在我們的webApp項(xiàng)目中也能實(shí)現(xiàn)相應(yīng)的效果呢？是可以的奢方。下面我們就以在vue中的應(yīng)用為例搔扁，來(lái)看一下它具體實(shí)現(xiàn)的邏輯吧。
???????可能您對(duì)我說(shuō)的這個(gè)效果還不是很了解蟋字，您可以訪問(wèn)這個(gè)網(wǎng)站稿蹲，進(jìn)行相應(yīng)的頁(yè)面切換操作，具體來(lái)感受一下鹊奖。
???????我們可以看到
進(jìn)入時(shí)苛聘，要進(jìn)入的和要移出的頁(yè)面均是從右向左推的。
離開(kāi)時(shí)忠聚，要進(jìn)入的和要移出的頁(yè)面均是從左向右推的设哗。
???????理解了上述的過(guò)渡效果，我們就可以設(shè)計(jì)我們具體的業(yè)務(wù)邏輯了两蟀。
一网梢、頁(yè)面過(guò)渡效果的實(shí)現(xiàn)邏輯
???????1、創(chuàng)建動(dòng)畫css赂毯。
???????2战虏、判斷當(dāng)前是需要執(zhí)行動(dòng)畫（進(jìn)入頁(yè)面）還是后退動(dòng)畫（后退頁(yè)面）
???????????監(jiān)聽(tīng)路由對(duì)象$route
???????????讓頁(yè)面跳轉(zhuǎn)的時(shí)候，攜帶包含跳轉(zhuǎn)標(biāo)記的 param,通過(guò)對(duì) param中跳轉(zhuǎn)標(biāo)記的判斷欢瞪，來(lái)判斷當(dāng)前是否為跳轉(zhuǎn)動(dòng)畫活烙。
???????????如果說(shuō)param包含跳轉(zhuǎn)標(biāo)記，那么當(dāng)前為跳轉(zhuǎn)動(dòng)畫,否則當(dāng)前為后退動(dòng)畫遣鼓。
???????3啸盏、通過(guò)transition的方式來(lái)為route-view指定對(duì)應(yīng)的動(dòng)畫效果。
三骑祟、實(shí)現(xiàn)頁(yè)面間滑動(dòng)切換效果
???????在vue中實(shí)現(xiàn)這樣的功能還是有天然的優(yōu)勢(shì)的回懦，因?yàn)槲覀兪褂胿ue進(jìn)行開(kāi)發(fā)時(shí)一般會(huì)選擇SPA（單頁(yè)應(yīng)用）的開(kāi)發(fā)模式气笙，就是在運(yùn)行的時(shí)候，要切換的的頁(yè)面主體結(jié)構(gòu)（可能存在異步加載資源的過(guò)程）都在一個(gè)頁(yè)面中怯晕，這樣就很容易實(shí)現(xiàn)我們的滑動(dòng)效果潜圃。若果不采用SPA這種方式進(jìn)行開(kāi)發(fā)，那該如何呢舟茶？我這里也沒(méi)有做過(guò)嘗試谭期，但是很早之前有書上說(shuō)可以設(shè)置``HTML的meta```標(biāo)簽來(lái)實(shí)現(xiàn),具體的您可以自行查閱一下。
???????在vue-router中提供了狀態(tài)過(guò)渡這樣的效果吧凉，就是讓你在進(jìn)行頁(yè)面（組件）間跳轉(zhuǎn)的時(shí)候可以實(shí)現(xiàn)一些過(guò)渡效果隧出。不過(guò)遺憾的是，它上面的實(shí)例都有一定的難度阀捅。所以我也不打算使用它的示例來(lái)進(jìn)行說(shuō)明胀瞪。
1、設(shè)置切換時(shí)的css動(dòng)畫樣式
// push 頁(yè)面時(shí)：新頁(yè)面的進(jìn)入動(dòng)畫
@keyframes fold-left-in{
0% {
transform: translate(100%, 0);
}
100% {
transform: translate(0,0)
}
}
// push 頁(yè)面時(shí)：原頁(yè)面的退出動(dòng)畫
@keyframes fold-left-out{
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%,0)
}
}
// 后退頁(yè)面時(shí)： 即將展示頁(yè)面的動(dòng)畫
@keyframes fold-right-in{
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0,0)
}
}
// 后退頁(yè)面時(shí)： 后退頁(yè)面的動(dòng)畫
@keyframes fold-right-out{
0% {
transform: translate(0, 0);
}
100% {
transform: translate(100%,0)
}
}
??????? 如果您理解了前面分析動(dòng)畫運(yùn)行的軌跡饲鄙，那么上面css的樣式就相對(duì)很好理解凄诞。
2、設(shè)置跳轉(zhuǎn)標(biāo)記
???????本篇文章中忍级，我們只設(shè)計(jì)了Home和About頁(yè)面之間的跳轉(zhuǎn)帆谍。下面是兩個(gè)頁(yè)面相應(yīng)的跳轉(zhuǎn)邏輯。
Home組件
methods: {
toggle(){
this.$router.push({
name: 'About',
params: {
routerType: 'push'
}
})
}
}
About組件
methods: {
toggle(){
this.$router.go(-1)
}
}
??????? Home組件攜帶了跳轉(zhuǎn)標(biāo)記push,會(huì)使用fold-left動(dòng)畫,而About組件沒(méi)有攜帶跳轉(zhuǎn)標(biāo)記,會(huì)使用fold-right動(dòng)畫轴咱。
3既忆、實(shí)現(xiàn)滑動(dòng)跳轉(zhuǎn)邏輯(App.vue)
修改模版
<transition :name="transitionName">
<router-view />
</transition>
創(chuàng)建數(shù)據(jù)
data(){
return {
transitionName: 'fold-left'
}
}
監(jiān)聽(tīng)路由對(duì)象，決定使用哪種過(guò)渡效果
watch: {
// 監(jiān)聽(tīng)路由對(duì)象嗦玖，決定使用哪種過(guò)渡效果
'$route'(to, from){
// 獲取到攜帶的標(biāo)記
const routerType = to.params.routerType
if(routerType === 'push'){
// 跳轉(zhuǎn)頁(yè)面
this.transitionName = 'fold-left'
} else{
// 后退頁(yè)面
this.transitionName = 'fold-right'
}
}
}
??????? 整體的邏輯就是通過(guò)判斷就你要跳轉(zhuǎn)到的路由是否函數(shù)跳轉(zhuǎn)跳轉(zhuǎn)標(biāo)記const routerType = to.params.routerType，然后動(dòng)態(tài)的改變transitionName的值跃脊，進(jìn)而響應(yīng)<router-link/>的<transition>過(guò)渡效果的名稱宇挫。
??????? 整體的邏輯設(shè)計(jì)到這里就差不多了，但是但我們切換的時(shí)候會(huì)存在一個(gè)問(wèn)題酪术，兩個(gè)頁(yè)面之間有空白的區(qū)域器瘪，這是什么原因造成的呢？前面分析過(guò)绘雁，當(dāng)前的這種方式只適合SPA開(kāi)發(fā)模式橡疼，我們當(dāng)前的每一個(gè)頁(yè)面的節(jié)點(diǎn).home、.about之間是按照正常流的方式排列的庐舟。所以會(huì)存在這樣的問(wèn)題欣除，怎么解決呢，我們只需要讓他們脫離文檔流挪略，顯示在同一行上面历帚。那就只需要添加下面的css屬性：
.home{
position:absolute;
width:100%;
height: 100%;
}
.about{
position:absolute;
width:100%;
height: 100%;
}
??????? 至此滔岳，我們的滑動(dòng)效果就實(shí)現(xiàn)了。此處代碼間文件配合較多挽牢，我就不將代碼一一列出谱煤，請(qǐng)您注意分析過(guò)程。感謝您的閱讀禽拔！
