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