日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
用了很多動(dòng)效，介紹四個(gè)很Nice的Veu路由過(guò)渡動(dòng)效

本文已經(jīng)過(guò)原作者 Ahmad shaded 授權(quán)翻譯。

成都創(chuàng)新互聯(lián)專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站制作、會(huì)澤網(wǎng)絡(luò)推廣、小程序開(kāi)發(fā)、會(huì)澤網(wǎng)絡(luò)營(yíng)銷(xiāo)、會(huì)澤企業(yè)策劃、會(huì)澤品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供會(huì)澤建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

Vue Router 過(guò)渡是向Vue應(yīng)用程序添加個(gè)性的一種快速簡(jiǎn)便的方法。它讓我們可以在應(yīng)用程序的不同頁(yè)面之間添加平滑的動(dòng)畫(huà)/過(guò)渡效果。

如果使用得當(dāng)，它可以讓我們的應(yīng)用程序更加現(xiàn)代和專(zhuān)業(yè)，從而增強(qiáng)用戶(hù)體驗(yàn)。

在今天的文章中，我們介紹使用Vue Router過(guò)渡的基礎(chǔ)知識(shí)，然后再介紹一些基本示例，希望能給大家一些啟發(fā)和靈感。

下面我們要?jiǎng)?chuàng)建的四個(gè)過(guò)渡頁(yè)面。

將 Vue 路由過(guò)渡添加到項(xiàng)目中

通常，Vue路由器設(shè)置如下所示

 
 
 
 
    
  
  
  
  
  1. // default template 
    2. 
  
  
  
  
  2.  
    3.

在舊版本的Vue Router中，我們可以簡(jiǎn)單地用 組件包裝 。

然而，在Vue Router的新版本中，我們必須使用v-slot來(lái)解構(gòu)我們的 props ，并將它們傳遞到我們的內(nèi)部插槽。這個(gè)slow包含一個(gè)被transition包圍的動(dòng)態(tài)組件。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.  
    6.

每個(gè) Route 都有不同的過(guò)渡

默認(rèn)情況下，用 包裝 將在我們使用 的每條路由上添加相同的過(guò)渡。

有兩種不同的方法可以為每個(gè)路由定制轉(zhuǎn)場(chǎng)。

將過(guò) transition 移到各個(gè)組件部分

首先，我們可以將 移到每個(gè)單獨(dú)的組件中，而不是用 組件來(lái)包裝我們的動(dòng)態(tài)組件。如下： 

 
 
 
 
    
  
  
  
  
  1. // app.vue 
    2. 
  
  
  
  
  2.  
    3.

 對(duì)于我們想要每個(gè)路由都有一個(gè)過(guò)渡效果，通過(guò)這種方式，我們可以通過(guò)過(guò)渡的名稱(chēng)來(lái)定制每個(gè)路由。

使用 v-bind 的動(dòng)態(tài)過(guò)渡

另一種方法是將過(guò)渡的名稱(chēng)綁定到一個(gè)變量。然后，我們可以根據(jù)監(jiān)聽(tīng)路由動(dòng)態(tài)地改變這個(gè)變量。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.  
    4. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. watch: { 
    2. 
  
  
  
  
  2.   '$route' (to, from) { 
    3. 
  
  
  
  
  3.     const toDepth = to.path.split('/').length 
    4. 
  
  
  
  
  4.     const fromDepth = from.path.split('/').length 
    5. 
  
  
  
  
  5.     this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left' 
    6. 
  
  
  
  
  6.   } 
    7. 
  
  
  
  
  7. } 
    8.

現(xiàn)在，我們了解了Vue Router Transition 的基礎(chǔ)知識(shí)，下面我們來(lái)看一些 Nice 的示例。

1 – Fade Vue Router Transitions

添漸隱頁(yè)面過(guò)渡可能是我們可以添加到Vue應(yīng)用程序中最常用的動(dòng)效之一。

我們可以通過(guò)更改元素的opacity 來(lái)實(shí)現(xiàn)此效果。

首先，我們創(chuàng)建一個(gè)帶有fade名稱(chēng)的 Vue Router transition。還要注意的另一件事是，我們將過(guò)渡模式設(shè)置為 out-in。

有三種不同的過(guò)渡模式:

  • default – 進(jìn)入和離開(kāi)過(guò)渡同時(shí)發(fā)生
  • in-out – 新元素的過(guò)渡先進(jìn)入。然后，當(dāng)前元素過(guò)渡出去。
  • out-in - 當(dāng)前元素先過(guò)渡出去。然后，新元素過(guò)渡進(jìn)來(lái)。

為了讓新元素平滑地淡入，我們需要在開(kāi)始新的過(guò)渡之前刪除當(dāng)前元素。所以我們使用 mode="out-in"。

為我們提供了幾個(gè)CSS類(lèi)，它們?cè)趧?dòng)畫(huà)周期中被動(dòng)態(tài)添加/刪除。

有6個(gè)不同的過(guò)渡類(lèi)(3個(gè)用于進(jìn)入，3個(gè)用于離開(kāi))。

  1. v-enter-from：定義進(jìn)入過(guò)渡的開(kāi)始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。
  2. v-leave-from：定義離開(kāi)過(guò)渡的開(kāi)始狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，下一幀被移除。
  3. v-enter-active：定義進(jìn)入過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用，在元素被插入之前生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義進(jìn)入過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
  4. v-leave-active：定義離開(kāi)過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)離開(kāi)過(guò)渡的階段中應(yīng)用，在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類(lèi)可以被用來(lái)定義離開(kāi)過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
  5. v-enter-to：定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter-from 被移除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。
  6. v-leave-to：離開(kāi)過(guò)渡的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave-from 被刪除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。

注意:當(dāng)我們?yōu)檫^(guò)渡提供一個(gè)name屬性時(shí)，這是默認(rèn)名稱(chēng)。類(lèi)的格式是name-enter-from、name-enter-active，等等。

我們希望進(jìn)入和離開(kāi)狀態(tài)的opacity 為0。然后，當(dāng)我們的過(guò)渡處生效狀態(tài)時(shí)，對(duì) opacity 進(jìn)行動(dòng)畫(huà)的處理。

 
 
 
 
    
  
  
  
  
  1. // fade styles! 
    2. 
  
  
  
  
  2. .fade-enter-active, 
    3. 
  
  
  
  
  3. .fade-leave-active { 
    4. 
  
  
  
  
  4.   transition: opacity 0.5s ease; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. .fade-enter-from, 
    9. 
  
  
  
  
  9. .fade-leave-to { 
    10. 
  
  
  
  
  10.   opacity: 0; 
    11. 
  
  
  
  
  11. } 
    12.

最后的效果 ：

2 – Slide Vue Router Transitions

我們要構(gòu)建的下一個(gè)過(guò)渡是幻燈片過(guò)渡。

模板如下所示。由于我們希望進(jìn)入和離開(kāi)過(guò)渡同時(shí)發(fā)生，因此使用默認(rèn)模式即可。

 
 
 
 
    
  
  
  
  
  1. // slide transition 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.    
    4. 
  
  
  
  
  4.      
    5. 
  
  
  
  
  5.    
    6. 
  
  
  
  
  6.  
    7.

為了讓例子更好看，我們給每個(gè)頁(yè)面加上下面的樣式：

 
 
 
 
    
  
  
  
  
  1. // component wrapper 
    2. 
  
  
  
  
  2. .wrapper { 
    3. 
  
  
  
  
  3.   width: 100%; 
    4. 
  
  
  
  
  4.   min-height: 100vh; 
    5. 
  
  
  
  
  5. } 
    6.

最后，在過(guò)渡樣式里為要滑動(dòng)的組件設(shè)置相關(guān)的屬性。如果需要不同的滑動(dòng)方向，只需更改CSS屬性(top, bottom, left, right)。

 
 
 
 
    
  
  
  
  
  1. // slide styles! 
    2. 
  
  
  
  
  2. .slide-enter-active, 
    3. 
  
  
  
  
  3. .slide-leave-active { 
    4. 
  
  
  
  
  4.   transition: all 0.75s ease-out; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. .slide-enter-to { 
    9. 
  
  
  
  
  9.   position: absolute; 
    10. 
  
  
  
  
  10.   right: 0; 
    11. 
  
  
  
  
  11. } 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14. .slide-enter-from { 
    15. 
  
  
  
  
  15.   position: absolute; 
    16. 
  
  
  
  
  16.   right: -100%; 
    17. 
  
  
  
  
  17. } 
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20. .slide-leave-to { 
    21. 
  
  
  
  
  21.   position: absolute; 
    22. 
  
  
  
  
  22.   left: -100%; 
    23. 
  
  
  
  
  23. } 
    24. 
  
  
  
  
  24.  
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26. .slide-leave-from { 
    27. 
  
  
  
  
  27.   position: absolute; 
    28. 
  
  
  
  
  28.   left: 0; 
    29. 
  
  
  
  
  29. } 
    30.

最終的效果:

3 – Scale Vue Router Transitions

創(chuàng)建縮放過(guò)渡與我們的淡入過(guò)渡非常相似。我們?cè)俅螌⒛Ｊ皆O(shè)置為 out-in，以便我們可以確保動(dòng)畫(huà)的正確順序。

 
 
 
 
    
  
  
  
  
  1. // scale transition! 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.      
    6. 
  
  
  
  
  6.    
    7. 
  
  
  
  
  7.  
    8. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. .scale-enter-active, 
    2. 
  
  
  
  
  2. .scale-leave-active { 
    3. 
  
  
  
  
  3.   transition: all 0.5s ease; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. .scale-enter-from, 
    8. 
  
  
  
  
  8. .scale-leave-to { 
    9. 
  
  
  
  
  9.   opacity: 0; 
    10. 
  
  
  
  
  10.   transform: scale(0.9); 
    11. 
  
  
  
  
  11. } 
    12.

這里給整個(gè)網(wǎng)頁(yè)提供黑色的背景色會(huì)讓過(guò)渡看上去更干凈。

4 – Combining Vue Router Transitions

創(chuàng)建過(guò)渡的方式有很多很多但是，我認(rèn)為不要過(guò)度過(guò)的，刻意的去做過(guò)渡。過(guò)渡動(dòng)效應(yīng)該是很小的，微妙的增強(qiáng)功能，而不是會(huì)讓?xiě)?yīng)用產(chǎn)生干擾因素。

我認(rèn)為實(shí)現(xiàn)較好過(guò)渡是將一些更基礎(chǔ)的過(guò)渡結(jié)合在一起。

例如，讓我們將幻燈片放大和縮小合并為一個(gè)過(guò)渡。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.    
    5. 
  
  
  
  
  5.  
    6. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. .scale-slide-enter-active, 
    2. 
  
  
  
  
  2. .scale-slide-leave-active { 
    3. 
  
  
  
  
  3.   position: absolute; 
    4. 
  
  
  
  
  4.   transition: all 0.85s ease; 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. .scale-slide-enter-from { 
    9. 
  
  
  
  
  9.   left: -100%; 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13. .scale-slide-enter-to { 
    14. 
  
  
  
  
  14.   left: 0%; 
    15. 
  
  
  
  
  15. } 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18. .scale-slide-leave-from { 
    19. 
  
  
  
  
  19.   transform: scale(1); 
    20. 
  
  
  
  
  20. } 
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23. .scale-slide-leave-to { 
    24. 
  
  
  
  
  24.   transform: scale(0.8); 
    25. 
  
  
  
  
  25. } 
    26.

~完，我是刷碗智， 我要去刷碗了，我們下期見(jiàn)!

原文：https://dmitripavlutin.com/value-vs-reference-javascript/ 作者：Ahmad shaded 譯者：前端小智 來(lái)源：sitepoint


當(dāng)前題目：用了很多動(dòng)效，介紹四個(gè)很Nice的Veu路由過(guò)渡動(dòng)效
分享URL：http://www.dlmjj.cn/article/djeihes.html