通過示例瞭解Vue過渡和動畫

前端小智發表於2022-01-28
Vue動畫
作者：Matt Maribojoc
譯者：前端小智
來源：stackabuse

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

Vue過渡和動畫讓我們網站更具現代感併為網站訪問者提供更好的使用者體驗的好方法。 幸運的是，對於開發人員而言，Vue動畫只需幾分鐘即可完成設定。

文字主要介紹 Vue <transition>元素，使用該元素建立一些Vue動畫，並瞭解將其新增到專案中的基本知識。

首先，我們來看一下 Vue Transitiont 怎麼處理有條件的渲染內容。

然後，建立自己的CSS動畫樣式。

最後，我們將瞭解如何將第三方CSS庫與Vue動畫一起使用。

理解 Vue 過渡

雖然大多數人認為過渡只是裝飾，但精心設計的過渡可以：

  • 抓住並引導使用者的注意力
  • 強調重要資訊
  • 引導使用者瀏覽頁面
  • 幫助建立更專業的品牌形象

所有這些要點都將有助於改善我們網站的使用者體驗，提高轉化率和使用者留存率，這是雙贏呀。

新增Vue過渡到我們的專案

為了適應多數的開發人員，VueJS 提供了幾種實現過渡的方法：

  1. css 或 動畫 過渡樣式
  2. JS Hook 對 DOM 進行編輯
  3. 整合第三方CSS

這些方法的難度取決於你現有的知識。

<transition> 元素是啥？

transition 元素是幫助我們向元素新增過渡功能的包裝器。它提供了不同的鉤子，並向不斷變化的元素新增了類，這樣我們就可以在轉換的不同階段對它們進行樣式化。

  1. enter-from-class
  2. enter-active-class
  3. enter-to-class
  4. leave-from-class
  5. leave-active-class
  6. leave-to-class

將自定義庫新增到程式碼中時，這特別有用，稍後，我們會做說明。

<transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

另外，transition元素還會發出JS鉤子函式，因此我們可以捕獲它們並使用 JS 來執行動畫。 可用的鉤子有：

  • before-enter / before-leave
  • enter / leave
  • after-enter / after-leave
  • enter-cancelled / leave-cancelled
<transition   @before-enter='beforeEnter'>
    <!-- ... -->
</transition>

然後，我們可以在 JS 中處理它們。

beforeEnter(el, done) {
   done()
}

Vue Transition 高階用法

上面介紹的只是一些基礎，在專案中，會遇到比較複雜的場景，這要怎麼做呢？

讓元件在載入下過渡

這個很簡單就能實現了， 只需將appear 屬性新增到transition 元素中，如下所示：

<transition name="fade" appear>
...
</transition>

在多個元素之間過渡

假設有兩個這樣交替的div。

<transition name="fade" appear>
  <div v-if="visible">
    Option A
  </div>
  <div v-else>
    Option B
  </div>
</transition>

我們要做的就是將它們包在transition中，這樣過渡樣式將同時適用於兩者。

要使程式碼按我們希望的方式起作用，需要注意以下幾點：

  1. 絕對定位元素

當Vue在兩個元素之間過渡時，有時會同時顯示兩個元素並進行進去/離開的過渡。 如果要獲得平滑的效果，則可能需要將它們絕對定位在彼此的頂部。

否則，將元素新增到DOM中或從DOM中刪除時，這些元素可能只是在各處跳躍。

2.如果元素是一樣的，則必須向該元件新增一個key屬性

如果元素是一樣的，Vue 會嘗試優化內容，僅替換元素的內容。 根據文件，如果要在多個元素之間進行過渡，最好始終新增 key。

更改過渡時間

Vue 可以檢測到過渡/動畫何時結束，但是如果我們想設定確切的持續時間，可以通過 duration 屬性設定 。

我們可以為enter和leave過渡都傳遞一個值，也可以傳有兩個值的物件。

<transition :duration="500">...</transition> 
...
<transition :duration="{ enter: 1000, leave: 200 }">...</transition>

動態元件之間的轉換

我們要做的就是將動態元件包裝在transition 元素中。

 <transition name="fade" appear>
     <component :is='componentType' />
 </transition>

建立一個可重用的 transition 元件

在開發過程中，嘗試設計可重用元件是一個很好的習慣。

封裝一個可重用的 transition 很簡單，在 transition 裡放個 slot，如下所示：

 <template>
   <transition name="fade" appear>
     <slot></slot>
   </transition>
 </template>

現在，我們就不必擔心將過渡樣式，名稱和所有內容新增到每個元件中，而只需使用此元件即可。

目前為止，我們已經瞭解了<transition>元素，現在就可以使用它來製作動畫。

建立第一個動畫

<template>
  <div class='main-content'>
    <transition name='rotate'>
      <img 
        v-if='show' 
        src='../img/logo.png'
      > 
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>

接下來，我們新增一個按鈕，通過切換變數的值來切換元素的顯示。

<button @click='show = !show'> Toggle </button>

設定了元素的條件渲染後，我們使用兩個類來設定動畫的樣式：rotate-enter-active和rotate-leave-active，因為我們將過渡命名為rotate。

一個技巧是讓離開和進入使用相同動畫，只是它們的方向相反。

@keyframes rotate {
    0% { opacity: 0; transform: scale(0) rotate(-180deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.rotate-enter-active {
    animation: rotate 0.2s;
}

.rotate-leave-active {
    animation: rotate 0.2s reverse;
}

現在，切換我們的元件時，我們應該看到類似這樣的內容。

使用第三方庫

假設我們不想自己編寫所有的CSS動畫。 有很多很棒的CSS動畫庫，可以很容易地將它們合併到VueJS動畫中。

在第一個示例中，我們只使用了<transition>元素生成的預設類名，但是我們可以做的就是將這些值覆蓋到我們想要的任何類中，在這種情況下，它將是CSS庫中的類名。

對於我們的示例，我們使用的[Animate.css](https://daneden.github.io/animate.css/) 這個動畫庫，我們只需將CDN連結新增到我們的index.html檔案即可。

// index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

現在，在我們的<transition>元素中，我們可以使用enter-active-class和leave-active-class屬性將過渡連線到Animate.js。

<transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

超級簡單，執行效果如下：

~完，我是前端小智，去板磚咯，我們下期見！

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://learne.co/2020/02/vue...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章