[[400810]]

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

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

首先，我們來(lái)看一下 Vue Transitiont 怎么處理有條件的渲染內(nèi)容。

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

最后，我們將了解如何將第三方CSS庫(kù)與Vue動(dòng)畫一起使用。

理解 Vue 過(guò)渡

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

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

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

添加Vue過(guò)渡到我們的項(xiàng)目

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

• css 或 動(dòng)畫 過(guò)渡樣式
• JS Hook 對(duì) DOM 進(jìn)行編輯
• 集成第三方CSS

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

<transition>元素是啥?

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

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

將自定義庫(kù)添加到代碼中時(shí)，這特別有用，稍后，我們會(huì)做說(shuō)明。

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

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

• 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 高級(jí)用法

上面介紹的只是一些基礎(chǔ)，在項(xiàng)目中，會(huì)遇到比較復(fù)雜的場(chǎng)景，這要怎么做呢?

讓組件在加載下過(guò)渡

這個(gè)很簡(jiǎn)單就能實(shí)現(xiàn)了， 只需將appear 屬性添加到transition 元素中，如下所示：

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

在多個(gè)元素之間過(guò)渡

假設(shè)有兩個(gè)這樣交替的div。

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

 我們要做的就是將它們包在transition中，這樣過(guò)渡樣式將同時(shí)適用于兩者。

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

絕對(duì)定位元素

當(dāng)Vue在兩個(gè)元素之間過(guò)渡時(shí)，有時(shí)會(huì)同時(shí)顯示兩個(gè)元素并進(jìn)行進(jìn)去/離開的過(guò)渡。如果要獲得平滑的效果，則可能需要將它們絕對(duì)定位在彼此的頂部。

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

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

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

更改過(guò)渡時(shí)間

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

我們可以為enter和leave過(guò)渡都傳遞一個(gè)值，也可以傳有兩個(gè)值的對(duì)象。

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

動(dòng)態(tài)組件之間的轉(zhuǎn)換

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

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

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

在開發(fā)過(guò)程中，嘗試設(shè)計(jì)可重用組件是一個(gè)很好的習(xí)慣。

封裝一個(gè)可重用的 transition 很簡(jiǎn)單，在 transition 里放個(gè) slot，如下所示：

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

現(xiàn)在，我們就不必?fù)?dān)心將過(guò)渡樣式，名稱和所有內(nèi)容添加到每個(gè)組件中，而只需使用此組件即可。

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

建立第一個(gè)動(dòng)畫

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

接下來(lái)，我們添加一個(gè)按鈕，通過(guò)切換變量的值來(lái)切換元素的顯示。

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

設(shè)置了元素的條件渲染后，我們使用兩個(gè)類來(lái)設(shè)置動(dòng)畫的樣式：rotate-enter-active和rotate-leave-active，因?yàn)槲覀儗⑦^(guò)渡命名為rotate。

一個(gè)技巧是讓離開和進(jìn)入使用相同動(dòng)畫，只是它們的方向相反。

@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)在，切換我們的組件時(shí)，我們應(yīng)該看到類似這樣的內(nèi)容。

使用第三方庫(kù)

假設(shè)我們不想自己編寫所有的CSS動(dòng)畫。有很多很棒的CSS動(dòng)畫庫(kù)，可以很容易地將它們合并到VueJS動(dòng)畫中。

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

對(duì)于我們的示例，我們使用的[Animate.css](https://daneden.github.io/animate.css/) 這個(gè)動(dòng)畫庫(kù)，我們只需將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屬性將過(guò)渡連接到Animate.js。

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

超級(jí)簡(jiǎn)單，運(yùn)行效果如下：

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

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