[[400810]]

 Vue過渡和動畫讓我們網(wǎng)站更具現(xiàn)代感并為網(wǎng)站訪問者提供更好的用戶體驗的好方法。幸運的是，對于開發(fā)人員而言，Vue動畫只需幾分鐘即可完成設置。

文本主要介紹 <transition>Vue 元素，使用該元素創(chuàng)建一些Vue動畫，并了解將其添加到項目中的基本知識。

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

然后，創(chuàng)建自己的CSS動畫樣式。

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

理解 Vue 過渡

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

• 抓住并引導用戶的注意力
• 強調重要信息
• 引導用戶瀏覽頁面
• 幫助建立更專業(yè)的品牌形象

所有這些要點都將有助于改善我們網(wǎng)站的用戶體驗，提高轉化率和用戶留存率，這是雙贏呀。

添加Vue過渡到我們的項目

為了適應多數(shù)的開發(fā)人員，VueJS 提供了幾種實現(xiàn)過渡的方法：

• css 或 動畫 過渡樣式
• JS Hook 對 DOM 進行編輯
• 集成第三方CSS

這些方法的難度取決于你現(xiàn)有的知識。

<transition>元素是啥?

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

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

將自定義庫添加到代碼中時，這特別有用，稍后，我們會做說明。

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

另外，transition元素還會發(fā)出JS鉤子函數(shù)，因此我們可以捕獲它們并使用 JS 來執(zhí)行動畫?？捎玫你^子有：

• 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 高級用法

上面介紹的只是一些基礎，在項目中，會遇到比較復雜的場景，這要怎么做呢?

讓組件在加載下過渡

這個很簡單就能實現(xiàn)了， 只需將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中，這樣過渡樣式將同時適用于兩者。

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

絕對定位元素

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

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

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

如果元素是一樣的，Vue 會嘗試優(yōu)化內容，僅替換元素的內容。根據(jù)文檔，如果要在多個元素之間進行過渡，最好始終添加 key。

更改過渡時間

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

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

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

動態(tài)組件之間的轉換

我們要做的就是將動態(tài)組件包裝在transition元素中。

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

創(chuàng)建一個可重用的 transition 組件

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

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

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

現(xiàn)在，我們就不必擔心將過渡樣式，名稱和所有內容添加到每個組件中，而只需使用此組件即可。

目前為止，我們已經了解了<transition> 元素，現(xiàn)在就可以使用它來制作動畫。

建立第一個動畫

<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; 
} 

現(xiàn)在，切換我們的組件時，我們應該看到類似這樣的內容。

使用第三方庫

假設我們不想自己編寫所有的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"> 

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

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

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

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

作者：Matt Maribojoc 譯者：前端小智 來源：stackabuse原文：https://learne.co/2020/02/vuejs-aniions-for-beginners/