作者:Ahmad shaded
譯者:前端小智
來源:sitepoint
有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。
Vue Router 過渡是向Vue應用程式新增個性的一種快速簡便的方法。 它讓我們可以在應用程式的不同頁面之間新增平滑的動畫/過渡效果。
如果使用得當,它可以讓我們的應用程式更加現代和專業,從而增強使用者體驗。
在今天的文章中,我們介紹使用Vue Router過渡的基礎知識,然後再介紹一些基本示例,希望能給大家一些啟發和靈感。
下面我們要建立的四個過渡頁面。
將 Vue 路由過渡新增到專案中
通常,Vue路由器設定如下所示
// default template
<template>
<router-view />
</template>
在舊版本的Vue Router中,我們可以簡單地用<transition>
元件包裝<router-view>
。
然而,在Vue Router的新版本中,我們必須使用v-slot
來解構我們的 props
,並將它們傳遞到我們的內部插槽。這個slow
包含一個被transition
包圍的動態元件。
<router-view v-slot="{ Component }">
<transition>
<component :is="Component" />
</transition>
</router-view>
每個 Route 都有不同的過渡
預設情況下,用<transition>
包裝<component>
將在我們使用的每條路由上新增相同的過渡。
有兩種不同的方法可以為每個路由定製轉場。
將過 transition 移到各個元件部分
首先,我們可以將<transition>
移到每個單獨的元件中,而不是用<transition>
元件來包裝我們的動態元件。 如下:
// app.vue
<template>
<transition>
<div class="wrapper">
<!-- -->
</div>
</transition>
</template>
對於我們想要每個路由都有一個過渡效果,通過這種方式,我們可以通過過渡的名稱來定製每個路由。
使用 v-bind 的動態過渡
另一種方法是將過渡的名稱繫結到一個變數。然後,我們可以根據監聽路由動態地改變這個變數。
<transition :name="transitionName">
<component :is="Component" />
</transition>
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
現在,我們瞭解了Vue Router Transition 的基礎知識,下面我們來看一些 Nice 的示例。
1 – Fade Vue Router Transitions
添漸隱頁面過渡可能是我們可以新增到Vue應用程式中最常用的動效之一。
我們可以通過更改元素的opacity
來實現此效果。
首先,我們建立一個帶有fade
名稱的 Vue Router transition。 還要注意的另一件事是,我們將過渡模式設定為 out-in
。
有三種不同的過渡模式:
default
– 進入和離開過渡同時發生in-out
– 新元素的過渡先進入。然後,當前元素過渡出去。out-in
- 當前元素先過渡出去。然後,新元素過渡進來。
為了讓新元素平滑地淡入,我們需要在開始新的過渡之前刪除當前元素。所以我們使用 mode="out-in"
。
<transition>
為我們提供了幾個CSS類,它們在動畫週期中被動態新增/刪除。
有6個不同的過渡類(3個用於進入,3個用於離開)。
v-enter-from
:定義進入過渡的開始狀態。在元素被插入之前生效,在元素被插入之後的下一幀移除。v-leave-from
:定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效,下一幀被移除。v-enter-active
:定義進入過渡生效時的狀態。在整個進入過渡的階段中應用,在元素被插入之前生效,在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間,延遲和曲線函式。v-leave-active
:定義離開過渡生效時的狀態。在整個離開過渡的階段中應用,在離開過渡被觸發時立刻生效,在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間,延遲和曲線函式。v-enter-to
:定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時v-enter-from
被移除),在過渡/動畫完成之後移除。v-leave-to
:離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時v-leave-from
被刪除),在過渡/動畫完成之後移除。
注意:當我們為過渡提供一個name
屬性時,這是預設名稱。類的格式是name-enter-from
、name-enter-active
,等等。
我們希望進入和離開狀態的opacity
為0。然後,當我們的過渡處生效狀態時,對 opacity
進行動畫的處理。
// fade styles!
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
最後的效果 :
2 – Slide Vue Router Transitions
我們要構建的下一個過渡是幻燈片過渡。
模板如下所示。 由於我們希望進入和離開過渡同時發生,因此使用預設模式即可。
// slide transition
<router-view v-slot="{ Component }">
<transition name="slide">
<component :is="Component" />
</transition>
</router-view>
為了讓例子更好看,我們給每個頁面加上下面的樣式:
// component wrapper
.wrapper {
width: 100%;
min-height: 100vh;
}
最後,在過渡樣式裡為要滑動的元件設定相關的屬性。如果需要不同的滑動方向,只需更改CSS屬性(top
, bottom
, left
, right
)。
// slide styles!
.slide-enter-active,
.slide-leave-active {
transition: all 0.75s ease-out;
}
.slide-enter-to {
position: absolute;
right: 0;
}
.slide-enter-from {
position: absolute;
right: -100%;
}
.slide-leave-to {
position: absolute;
left: -100%;
}
.slide-leave-from {
position: absolute;
left: 0;
}
最終的效果:
3 – Scale Vue Router Transitions
建立縮放過渡與我們的淡入過渡非常相似。 我們再次將模式設定為 out-in
,以便我們可以確保動畫的正確順序。
// scale transition!
<router-view v-slot="{ Component }">
<transition name="scale" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
.scale-enter-active,
.scale-leave-active {
transition: all 0.5s ease;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0.9);
}
這裡給整個網頁提供黑色的背景色會讓過渡看上去更乾淨。
4 – Combining Vue Router Transitions
建立過渡的方式有很多很多但是,我認為不要過度過的,刻意的去做過渡。 過渡動效應該是很小的,微妙的增強功能,而不是會讓應用產生干擾因素。
我認為實現較好過渡是將一些更基礎的過渡結合在一起。
例如,讓我們將幻燈片放大和縮小合併為一個過渡。
<router-view v-slot="{ Component }">
<transition name="scale-slide">
<component :is="Component" />
</transition>
</router-view>
.scale-slide-enter-active,
.scale-slide-leave-active {
position: absolute;
transition: all 0.85s ease;
}
.scale-slide-enter-from {
left: -100%;
}
.scale-slide-enter-to {
left: 0%;
}
.scale-slide-leave-from {
transform: scale(1);
}
.scale-slide-leave-to {
transform: scale(0.8);
}
~完,我是刷碗智, 我要去刷碗了,我們下期見!
程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文:https://learnue.co/2021/01/4-...
交流
有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。