Vue頁面跳轉動畫效果實現

摘要： 現如今移動端APP對使用者體驗方面的要求越來越高了，最近致力於使用者體驗優化，因為需要實現類似APP頁面切換的動畫效果，百度google搜尋資料不是很全，所以自己寫文件，在實現效果的基礎上，順便惡補一波VueRouter及CSS過渡動畫的知識點，歡迎有興趣的朋友多多指教。 寫在前面的思考 ...

現如今移動端APP對使用者體驗方面的要求越來越高了，最近致力於使用者體驗優化，因為需要實現類似APP頁面切換的動畫效果，百度google搜尋資料不是很全，所以自己寫文件，在實現效果的基礎上，順便惡補一波VueRouter及CSS過渡動畫的知識點，歡迎有興趣的朋友多多指教。

寫在前面的思考

• 如何匹配到相應需要跳轉的頁面？
• 如何判斷是“前進”還是“後退”而後使用不同的動畫方式？
• 如何對不同的跳轉設定動畫效果？

實現過程

一、vue路由匹配

建立vue例項，匹配路由。

用Vue.js + Vue Router建立單頁應用，是非常簡單的。使用Vue.js，我們可以通過組合元件來組成應用程式，將Vue Router 新增進來之後，我們需要做的是，將元件(components)對映到路由(routes),然後告訴Vue Router 在哪裡渲染它們。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//如果使用模組化機制程式設計，匯入Vue和VueRouter，就需要呼叫Vue.use(Router)
複製程式碼

接下來就可以進行路由元件的對映：

(路由)元件的定義可以自行定義，當然，為了踐行模組化元件化思想，多是從其他檔案import進來。以下以簡單的“登入->主頁->點單->結算”四個頁面的互動為例：

import Login from '@/components/login' 
import Index from '@/components/index' 
import PointList from '@/components/pointList/pointList' 
import SettLement from '@/components/pointList/settlement' 

//建立router例項，然後傳入‘routes’配置
export default new Router({
//routes配置可以直接傳入，也可以先定義後使用
//每個路由都應該對映一個元件，其中component可以是通過Vue.extend()建立的元件構造器，
或者只是一個元件配飾物件。(今天暫時不考慮巢狀路由的情況)
routes: [
{
path: '/', // 登入
name: 'Login',
component: Login
},
{
path: '/index', // 主頁
name: 'Index',
component: Index
},
{
path: '/pointList', // 點單
name: 'PointList',
component: PointList
},
{
path: '/settLement', // 結算
name: 'SettLement',
component: SettLement
}
]
})
複製程式碼

二、路由跳轉 $router

元件路由除了使用全域性元件 router-link 來實現點選跳轉(相當於按鈕)外，還可以使用元件本身
具有的一個例項物件$router及其一些屬性來達到目標。
$router 是VueRouter的一個例項物件，相當於一個全域性的路由器物件。在Vue例項內部，你可以
通過$router訪問路由例項，裡面含有很多屬性和子物件，例如history物件，經常用到的跳轉鏈
接就可以呼叫this.$router.push，this.$router.push會往history棧中新增一個新記錄。
複製程式碼

宣告式	程式設計式
<router-link :to="..."	router.push(...)

點選 等同於呼叫 router.push(...)

(...)該方法的引數可以是一個字串，或者一個描述地址的物件：

// 字串
router.push('home')
// 物件
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢引數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
複製程式碼

元件路由跳轉例項：

1.

<router-link :to="{name:'PointList', params: { userId: 123 }}">
<i class="icon"><img src="../assets/point.png" alt=""></i>
<span>點單</span>
</router-link>
複製程式碼

<footer class="version" @click="goPage('Author')">v 1.0</footer>
//Js：
methods: {
goPage(url, param) {
this.$router.push({ name: url });
}
}
複製程式碼

三、vue路由物件$route(只讀)

在使用了vue-router的應用中，路由物件會被注入每個元件中，賦值為this.$route,並且當路由切換時，路由物件會被更新。所以route相當於當前正在跳轉的路由物件，可以從裡面獲取name,path,params,query等，即包含了當前URL解析得到的資訊，還有URL匹配到的路由記錄。

路由物件暴露了以下屬性(常見)：

1. $route.path

字串(string)。等於當前路由物件的路徑，會被解析為絕對路徑，
如:http://example.com/#/login?name=aa，this.$route.path
，輸出“/login”，即對應上面1中路由匹配時routes配置中的“path”；
複製程式碼

2. $ ofollow,noindex">route.name

   字串(string)。有時候，通過一個名稱來標識一個路由顯得更加方便，特別是在連結一個路由，或者是執行一些跳轉的時候。同樣，這裡的name也對應了routes配置中給某個路由設定名稱的name值：

   要連結到一個命名路由，可以給router-link的to屬性傳一個物件：

<router-link :to="{name:'Order', params: { userId: 123 }}">
</router-link>
複製程式碼

用在呼叫router.push()中也是一回事：

this.$router.push({ name: 'Order', params: { userId: 123 }})
複製程式碼

3. $route.params

   物件(object)。路由跳轉攜帶引數：

this.$router.push({ name: 'Order', params: { userId: 123 }})
console.log(this.$route.params.userId); //123
複製程式碼

4. $route.query

   物件(object)。可訪問攜帶的查詢引數：

this.$router.push({name: 'login', query:{name: 'userName'}});
this.$route.query.name;//you
//此時路由為:"http://example.com/#/login?name=userName。"
複製程式碼

5. $route.redirectedFrom

   字串(string)。重定向來源：

如：{ path: '*',redirect: {name: 'hello'}}
此時訪問不存在的路由http://example.com/#/a會重定向到hello，
在hello訪問this.$route.redirectedFrom; 輸出“/a”。
複製程式碼

6. $route.matched
   陣列(array)。當前路由下路由宣告的所有信息，從父路由(如果有)到當前路由為止。
7. $route.hash
   字串(string)。當前路徑的hash值。

四、vue監聽$route的方式

watch：{‘$route’ (to, from) {}}
複製程式碼

// watch $route 決定使用哪種過渡
watch:{
'$route' (to, from) {
//此時假設從index頁面跳轉到pointList頁面
console.log(to); // "/pointList"
console.log(from); // “/index”
const routeDeep = ['/', '/index','/pointList', '/settLement'];
const toDepth = routeDeep.indexOf(to.path)
const fromDepth = routeDeep.indexOf(from.path)
this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
}
},
複製程式碼

to、from是最基本的路由物件，分別表示從(from)某個頁面跳轉到(to)另一個頁面,to.path（表示要跳轉到的路由地址），from.path同理。

定義routeDeep陣列，將路由目錄按層級依次排序(暫不考慮巢狀路由的情況)，複雜單頁應用裡，同一層級（如同一頁面上的多個導航按鈕）順序隨意，然後依次排列每個導航的下一頁、下下頁…即保證每個“上一頁”在“下一頁”前面。

總結下來就是：按照routeDeep數組裡定義的路由目錄的順序，“toDepth > fromDepth”表示“上一頁”跳轉到“下一頁”，同理可由此判斷是“前進”還是“後退”。

五、Vue2.0中transition元件的使用

<transition :name="transitionName">
<router-view class="view app-view"></router-view>
</transition>
複製程式碼

• transition中只有name屬性，不可新增其他標籤屬性。
• transition中只能有一個子元素並且該子元素需要有v-show或者v-if來控制是否顯示。

過渡CSS類名

transition中的name屬性用於 替換 vue鉤子函式中的類名transitionName-

• transitionName-enter: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。
• transitionName-enter-active: 定義進入過渡的結束狀態。在元素被插入時生效，在transition/animation完成之後移除。
• transitionName-leave:定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。
• transitionName-leave-active: 定義離開過渡的結束狀態。在離開過渡被觸發時生效，在transition/animation完成之後移除。

this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
複製程式碼

在“watch $route”中，判斷頁面跳轉的“前進”和“後退”時，決定用不同的過渡效果（fold-left還是fold-right）。

六、animation、transform動畫效果實現

在上一個主題中，判斷頁面跳轉路徑之後，為兩種跳轉的transition設定不同的類名“fold-left”、“fold-right”。

然後在CSS中，為兩種類名設定不同的動畫效果(這裡以“左滑動”和“右滑動”為例)：

.fold-left-enter-active {
animation-name: fold-left-in;
animation-duration: .3s;
}
.fold-left-leave-active {
animation-name: fold-left-out;
animation-duration: .3s;
}
.fold-right-enter-active {
animation-name: fold-right-in;
animation-duration: .3s;
}
.fold-right-leave-active {
animation-name: fold-right-out;
animation-duration: .3s;
}
複製程式碼

animation 屬性是一個簡寫屬性，用於設定六個動畫屬性：

值	描述
animation-name	規定需要繫結到選擇器的 keyframe 名稱。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始之前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

@keyframes fold-left-in {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes fold-left-out {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
複製程式碼

根據CSS3 @keyframes規則，建立動畫。建立動畫的原理即將一套CSS樣式逐漸變化為另一套樣式。在動畫過程中，能夠多次改變這套CSS樣式。可以“百分比”來規定改變發生的時間，或者通過關鍵詞“from”和“to”，等價於“0%”(動畫的開始時間)和“100%”(動畫的結束時間)。一般為了獲得最佳的瀏覽器支援，應該始終定義0%和100%選擇器。

transform屬性向元素應用2D或3D轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。translate3d(x,y,z)定義3D轉換，如transform：translate3d(100%, 0, 0)只改變了x的值，即代表橫向左滑動，同理可相應推出其他情況。

總結

以上就是vue頁面跳轉動畫效果功能實現的6個步驟，即這個功能中所含括的6個大知識點，當然其中還包括許多擴充套件的知識點，學無止境，需慢慢深入挖掘…