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

作者：前端小智 2021-05-21 07:41:15

開發項目管理

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

[[400810]]

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

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

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

然后，創建自己的CSS動畫樣式。

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

理解 Vue 過渡

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

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

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

添加Vue過渡到我們的項目

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

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

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

<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元素還會發出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中，這樣過渡樣式將同時適用于兩者。

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

絕對定位元素

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

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

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

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

責任編輯：姜華來源：大遷世界

Vue 過渡動畫