經過示例瞭解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... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。