Vue頁面跳轉動畫效果實現
現如今移動端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匹配到的路由記錄。
路由物件暴露了以下屬性(常見):
- $route.path
字串(string)。等於當前路由物件的路徑,會被解析為絕對路徑, 如:http://example.com/#/login?name=aa,this.$route.path ,輸出“/login”,即對應上面1中路由匹配時routes配置中的“path”; 複製程式碼
-
$ 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 }}) 複製程式碼
-
$route.params
物件(object)。路由跳轉攜帶引數:
this.$router.push({ name: 'Order', params: { userId: 123 }}) console.log(this.$route.params.userId); //123 複製程式碼
-
$route.query
物件(object)。可訪問攜帶的查詢引數:
this.$router.push({name: 'login', query:{name: 'userName'}}); this.$route.query.name;//you //此時路由為:"http://example.com/#/login?name=userName。" 複製程式碼
-
$route.redirectedFrom
字串(string)。重定向來源:
如:{ path: '*',redirect: {name: 'hello'}} 此時訪問不存在的路由http://example.com/#/a會重定向到hello, 在hello訪問this.$route.redirectedFrom; 輸出“/a”。 複製程式碼
- $route.matched
陣列(array)。當前路由下路由宣告的所有信息,從父路由(如果有)到當前路由為止。 - $route.hash
字串(string)。當前路徑的hash值。
四、vue監聽$route的方式
watch:{‘$route’ (to, from) {}} 複製程式碼
route 的變化。watch中監聽的物件預設回撥函式中的引數值就是newVal,oldVal。作為 $route 屬性來說當然也就是 to 和 from 的概念了。
Vue用router.push(傳參)跳轉頁面,引數改變,在跳轉後的路由觀察路由變化,進行頁面重新整理,可對“from->to”的過程設定動畫效果。
該功能的難點就在於怎樣獲取“上一頁”和“下一頁”,即怎樣分辨是“前進”還是“後退”?
例:
// 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個大知識點,當然其中還包括許多擴充套件的知識點,學無止境,需慢慢深入挖掘…