【譯】如何使用Vue過渡效果來提高用戶體驗

在Vue應用中添加過渡效果是一個可使你的項目感受更專業的簡單方法。經過提高用戶體驗，可使你的網站留住更多的用戶以及提升轉化率。 只須要簡單的處理就能夠得到巨大的回報，何樂而不爲？ 在這個指南中，咱們將帶你瞭解關於Vue過渡效果的相關知識，從最基本的開箱即用的方法到建立自定義過渡效果。 準備好開始學習關於Vue的過渡了嗎？讓咱們開始吧。

爲何還要使用過渡效果

大部分人會以爲過渡效果只是一種裝飾，可是一個具備好的設計的過渡效果能夠達到如下一些做用：

• 吸引用戶的注意力
• 強調重要的信息
• 網站更加天然流暢
• 引導用戶瀏覽你的網頁
• 有助於創造更專業的品牌形象

以上全部的點能夠很好地提高網站的用戶體驗以及提升轉化率。共贏。

OK，如今咱們知道了過渡效果對你的網站是極其的有幫助，讓咱們學習若是用Vue來實現這種效果吧。

建立一個Vue過渡效果

爲了容納普遍不一樣技術棧的開發者，VueJS提供了幾種方法來實現過渡：

• 在CSS過渡和動畫應用class
• 在過渡鉤子函數使用JS實現操做DOM
• 使用第三方CSS/JS庫

要使用以上哪種方式取決於你現有的技術知識。若是是有更好的HTML/CSS經驗，那你可使用第一種。若是你是從React轉過來的或者只有更多的JS經驗，手動地操做DOM也是一個好的方式。

如今咱們重點介紹使用CSS編寫單個元素的動畫效果。不過請放心，咱們後續將介紹更高級的內容（多個元素，動態組建、例子）。

瞭解過渡組件

transition元素是一個容器，能夠幫助你在元素上添加過渡功能。本質上，它設置了不一樣的函數鉤子以及在變化的元素中添加calss，所以咱們能夠在不一樣的過渡階段設置樣式。

有6種不一樣的過渡class（3個進入的，3個離開的類），分別是： 一、v-enter/v-leave：過渡的開始狀態；過渡離開開始狀態。 二、v-enter-active/v-leave-active:過渡激活狀態。 三、v-enter-to/v-leave-to:過渡結束狀態。 詳細可參考官方文檔

提示：當你對過渡定義一個名稱，這就是默認的名稱。類名的格式爲name-enter，name-enter-active等等。

下面咱們看下添加過渡的簡單方式。 格式化模版的代碼很是簡單。只須要將須要過渡效果的元素用組件包裹起來便可。就像這樣：

<template>
  <div>
    <button @click='visible = !visible'>Toggle Div</button>
    <transition name="fade">
      <div v-if="visible">
        Hello World
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: true
    }
  }
}
</script>
複製代碼

很簡單，對吧？ 如今，咱們須要添加一些樣式來實現真正的過渡效果了。 咱們使用官方文檔例子的一些樣式：

<style lang="scss">
.fade-enter-active, .fade-leave-active {
 transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
 opacity: 0;
}
</style>
複製代碼

以上代碼是作了什麼？其實這個很直觀，由於加了一些相似狀態的類名。 這些樣式說明當過渡激活的時候，對opacity屬性添加過渡，使其平滑地變化。 而後，設置過渡進入開始狀態和過渡離開的結束狀態爲零（不可見）。同時，要記住當元素沒有設置fade-enter或者fade-leave-to類名，opacity將會設置回默認值。

好了。 能夠在你的Vue應用裏添加過渡效果了。如今，咱們來繼續深刻，瞭解更多細節。 另外，你也可使用CSS動畫來實現過渡效果。 只有你可以使用合適的類名，就能夠根據本身的喜愛對這些組件進行樣式設置。 下面來看看過渡效果的更高級用法。

在組件加載後使用過渡效果

超級簡單，只須要在過渡元素添加一個appear屬性便可，像這樣：

<transition name="fade" appear>
      <div v-if="visible">
        Hello World
      </div>
</transition>
複製代碼

多個元素使用過渡效果

一樣地，這個也是超級簡單。像下面那樣兩個div之間切換。

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

你所須要作的就是用transition元素將這些元素包裹起來，過渡效果就能夠生效。 但須要注意如下幾點： 當在兩個元素之間應用Vue過渡效果時，有時兩個元素都是可見的而且正在移入/移出。若是要達到一個平滑的效果，你可能須要將它們絕對定位在彼此的頂部。 若是元素具備相同的標籤，Vue會進行優化並且只替換元素的內容，而不是從新銷燬建立。根據官方文檔，若是須要在多個元素之間進行轉換，最佳實踐就是在元素上添加一個key。

動態組件使用過渡效果

這個相對於上面的例子更加簡單了。只須要把動態組件放在transition元素裏面就能夠了。例如：

<transition name="fade" appear>
      <component :is='componentType' />
</transition>
複製代碼

建立一個可重用的過渡組件

使用slot建立一個可替換內容的組件，例如：

<template>
  <transition name="fade" appear>
    <slot></slot>
  </transition>
</template>
複製代碼

最後

沒什麼好說的。Happpy Coding。

後記

文章寫的實在太囉嗦，寫不下去了。還不如看官方文檔。水文一篇。以上譯文僅用於學習交流，水平有限，不免有錯誤之處，敬請指正。

參考

原文 一個學習Vue的網站:learnVue