Vue頁面跳轉動畫效果的實現(xiàn)方法
前言
現(xiàn)如今移動端APP對用戶體驗方面的要求越來越高了，最近致力于用戶體驗優(yōu)化，因為需要實現(xiàn)類似APP頁面切換的動畫效果，百度google搜索資料不是很全，所以自己寫文檔，在實現(xiàn)效果的基礎上，順便惡補一波VueRouter及CSS過渡動畫的知識點，歡迎有興趣的朋友多多指教。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面應用，是用一些超鏈接來實現(xiàn)頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。
寫在前面的思考
- 如何匹配到相應需要跳轉的頁面？
- 如何判斷是“前進”還是“后退”而后使用不同的動畫方式？
- 如何對不同的跳轉設置動畫效果？
實現(xiàn)過程
一、vue路由匹配
創(chuàng)建vue實例，匹配路由。
用Vue.js + Vue Router創(chuàng)建單頁應用，是非常簡單的。使用Vue.js，我們可以通過組合組件來組成應用程序，將Vue Router 添加進來之后，我們需要做的是，將組件(components)映射到路由(routes),然后告訴Vue Router 在哪里渲染它們。
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) //如果使用模塊化機制編程，導入Vue和VueRouter，就需要調(diào)用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'
//創(chuàng)建router實例，然后傳入‘routes'配置
export default new Router({
//routes配置可以直接傳入，也可以先定義后使用
//每個路由都應該映射一個組件，其中component可以是通過Vue.extend()創(chuàng)建的組件構造器，
或者只是一個組件配飾對象。(今天暫時不考慮嵌套路由的情況)
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 來實現(xiàn)點擊跳轉(相當于按鈕)外，還可以使用組件本身具有的一個實例對象$router及其一些屬性來達到目標。
$router 是VueRouter的一個實例對象，相當于一個全局的路由器對象。在Vue實例內(nèi)部，你可以通過$router訪問路由實例，里面含有很多屬性和子對象，例如history對象，經(jīng)常用到的跳轉鏈接就可以調(diào)用this.$router.push，this.$router.push會往history棧中添加一個新記錄。
| 聲明式 | 編程式 |
| <router-link :to="..." | router.push(...) |
點擊 等同于調(diào)用 router.push(...)
(...)該方法的參數(shù)可以是一個字符串，或者一個描述地址的對象：
// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù)，變成 /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>
2.
<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、$route.name
字符串(string)。有時候，通過一個名稱來標識一個路由顯得更加方便，特別是在鏈接一個路由，或者是執(zhí)行一些跳轉的時候。同樣，這里的name也對應了routes配置中給某個路由設置名稱的name值：
要鏈接到一個命名路由，可以給router-link的to屬性傳一個對象：
<router-link :to="{name:'Order', params: { userId: 123 }}">
</router-link>
用在調(diào)用router.push()中也是一回事：
this.$router.push({ name: 'Order', params: { userId: 123 }})
3、$route.params
對象(object)。路由跳轉攜帶參數(shù)：
this.$router.push({ name: 'Order', params: { userId: 123 }})
console.log(this.$route.params.userId); //123
4、$route.query
對象(object)?？稍L問攜帶的查詢參數(shù)：
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
數(shù)組(array)。當前路由下路由聲明的所有信息，從父路由(如果有)到當前路由為止。
7、$route.hash
字符串(string)。當前路徑的hash值。
四、vue監(jiān)聽$route的方式
watch：{‘$route' (to, from) {}}
route 的變化。watch中監(jiān)聽的對象默認回調(diào)函數(shù)中的參數(shù)值就是newVal,oldVal。作為 $route 屬性來說當然也就是 to 和 from 的概念了。
Vue用router.push(傳參)跳轉頁面，參數(shù)改變，在跳轉后的路由觀察路由變化，進行頁面刷新，可對“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數(shù)組，將路由目錄按層級依次排序(暫不考慮嵌套路由的情況)，復雜單頁應用里，同一層級（如同一頁面上的多個導航按鈕）順序隨意，然后依次排列每個導航的下一頁、下下頁…即保證每個“上一頁”在“下一頁”前面。
總結下來就是：按照routeDeep數(shù)組里定義的路由目錄的順序，“toDepth > fromDepth”表示“上一頁”跳轉到“下一頁”，同理可由此判斷是“前進”還是“后退”。
五、Vue2.0中transition組件的使用
<transition :name="transitionName"> <router-view class="view app-view"></router-view> </transition>
- transition中有name屬性用于替換vue鉤子函數(shù)中的類名。
- transition中只能有一個子元素并且該子元素需要有v-show或者v-if來控制是否顯示。
過渡CSS類名
transition中的name屬性用于 替換 vue鉤子函數(shù)中的類名transitionName-
- transitionName-enter: 定義進入過渡的開始狀態(tài)。在元素被插入時生效，在下一個幀移除。
- transitionName-enter-active: 定義進入過渡的結束狀態(tài)。在元素被插入時生效，在transition/animation完成之后移除。
- transitionName-leave:定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時生效，在下一個幀移除。
- transitionName-leave-active: 定義離開過渡的結束狀態(tài)。在離開過渡被觸發(fā)時生效，在transition/animation完成之后移除。
this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
在“watch $route”中，判斷頁面跳轉的“前進”和“后退”時，決定用不同的過渡效果（fold-left還是fold-right）。
六、animation、transform動畫效果實現(xiàn)
在上一個主題中，判斷頁面跳轉路徑之后，為兩種跳轉的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 | 規(guī)定需要綁定到選擇器的 keyframe 名稱。 |
| animation-duration | 規(guī)定完成動畫所花費的時間，以秒或毫秒計。 |
| animation-timing-function | 規(guī)定動畫的速度曲線。 |
| animation-delay | 規(guī)定在動畫開始之前的延遲。 |
| animation-iteration-count | 規(guī)定動畫應該播放的次數(shù)。 |
| animation-direction | 規(guī)定是否應該輪流反向播放動畫。 |
@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);
}
}
根據(jù)CSS3 @keyframes規(guī)則，創(chuàng)建動畫。創(chuàng)建動畫的原理即將一套CSS樣式逐漸變化為另一套樣式。在動畫過程中，能夠多次改變這套CSS樣式。可以“百分比”來規(guī)定改變發(fā)生的時間，或者通過關鍵詞“from”和“to”，等價于“0%”(動畫的開始時間)和“100%”(動畫的結束時間)。一般為了獲得最佳的瀏覽器支持，應該始終定義0%和100%選擇器。
transform屬性向元素應用2D或3D轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。translate3d(x,y,z)定義3D轉換，如transform：translate3d(100%, 0, 0)只改變了x的值，即代表橫向左滑動，同理可相應推出其他情況。
總結
以上就是vue頁面跳轉動畫效果功能實現(xiàn)的6個步驟，即這個功能中所含括的6個大知識點，當然其中還包括許多擴展的知識點，學無止境，需慢慢深入挖掘…
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
本文主要介紹了elementUI中使用formdata進行上傳文件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
關于vue打包時的publicPath就是打包后靜態(tài)資源的路徑問題
這篇文章主要介紹了vue打包時的publicPath，就是打包后靜態(tài)資源的路徑,本文通過三種情況分析給大家詳細介紹，需要的朋友可以參考下2022-07-07
VueAwesomeSwiper在VUE中的使用以及遇到的一些問題
這篇文章主要介紹了VueAwesomeSwiper在VUE中的使用以及遇到的一些問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue單個元素綁定多個事件問題(例如點擊綁定多個事件方法)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue?3?使用moment設置顯示時間格式的問題及解決方法
在Vue?3中,因為過濾器(filter)已經(jīng)被廢棄,取而代之的是全局方法(global?method),本文給大家介紹Vue?3?使用moment設置顯示時間格式的問題及解決方法,感興趣的朋友一起看看吧2023-12-12
由于公司網(wǎng)絡登element-ui官方文檔很慢,想把他載下來離線文檔本地跑,下面這篇文章主要給大家介紹了關于本地部署element-plus文檔的簡單步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了vue中百度地圖定位及附近搜索功能使用步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
在封裝第三方組件中,經(jīng)常會遇到一個問題,下面這篇文章主要給大家介紹了關于如何在vue中更優(yōu)雅的封裝第三方組件的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
vue.config.js配置proxy代理產(chǎn)生404錯誤的原因及解決
這篇文章主要介紹了vue.config.js配置proxy代理產(chǎn)生404錯誤的原因及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue3 全局使用按鈕截流指令示例代碼,Vue2與Vue3中的自定義指令實現(xiàn)方式略有不同，但實現(xiàn)的按鈕截流功能是類似的，本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05