回首Vue3之組件篇（二）

這是我參與8月更文挑戰的第11天，活動詳情查看：8月更文挑戰

這篇文章咱們來說一下內置組件transition和transition-group的使用方法，在使用它們的時候咱們又該注意什麼呢，下面讓咱們一探究竟把。

transition

transition是 Vue 提供的單元素/組件的過渡封裝組件。若是有條件渲染 "v-if"、條件展現 "v-show"、動態組件和組件根節點任何一種狀況，咱們可使用transition給任何元素和組件添加進入/離開過渡。

過渡class

過渡class共6個，其中 進入 enter 3個，離開 leave 3個，以下圖所示：

1. from表示進入或離開的開始狀態。

2. active表示進入或離開的過渡狀態。在整個過渡的階段中應用，在元素被插入以前生效，在過渡/動畫完成以後移除。這個類能夠被用來定義過渡的過程時間，延遲和曲線函數。

3. to表示進入或離開的結束狀態。

值得咱們注意的是：

• 圖中的v表明transition的name屬性的值，例如name="slide-fade",對應 v-enter-from 要變成 slide-fade-enter-from

• 在Vue3中，enter-class 已經被重命名爲 enter-from-class，leave-class 已經被重命名爲 leave-from-class，這是與Vue2不一樣的地方。

如何使用

CSS過渡 transition

假設咱們這樣使用transition，以下：

<transition name="fade">
    <p v-show="show">world</p>
</transition>
複製代碼

那麼，咱們須要對應的css樣式，以下：

//進入和離開的過渡狀態
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

//進入的開始 離開的結束
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
複製代碼

類比原生hover效果，enter至關於鼠標移入的效果，leave至關於鼠標移出的效果。

CSS動畫

若是咱們把上述的過渡改爲動畫該怎麼作呢，以下：

//這裏是加入 進入 和 離開 的動畫
.fade-enter-active {
    animation: fade-in 0.5s;
}
.fade-leave-active {
    animation: bounce-in 0.5s reverse;
}

//這裏就是咱們平時寫的 keyframes
@keyframes fade-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}
複製代碼

自定義過渡class類名

當咱們結合第三方動畫庫的時候，咱們能夠自定義過渡class類名，它們的優先級高於普通的類名，自定義類名的屬性以下：

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

使用以下：

<transition name="bounce" enter-active-class="animate__animated animate__tada" leave-active-class="animate__animated animate__bounceOutRight">
    <p v-show="show">world</p>
</transition>
複製代碼

顯示的是自定義類名的效果，高於name屬性的效果。

JavaScript 鉤子

能夠在 attribute 中聲明 JavaScript 鉤子，這樣咱們能夠在對應的鉤子裏面操做el，鉤子使用以下：

<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled" //僅 v-show :css="false" >
  <!-- ... -->
</transition>
複製代碼

咱們須要給它們對應的函數，以下：

methods: {
    //*****進入時*****
  beforeEnter(el) {
    // ...
  },
  // 當與 CSS 結合使用時
  // 回調函數 done 是可選的
  enter(el, done) {
    // ...
    done()
  },
  afterEnter(el) {
    // ...
  },
  enterCancelled(el) {
    // ...
  },

  //***** 離開時 *****
  beforeLeave(el) {
    // ...
  },
  // 當與 CSS 結合使用時
  // 回調函數 done 是可選的
  leave(el, done) {
    // ...
    done()
  },
  afterLeave(el) {
    // ...
  },
  // leaveCancelled 只用於 v-show 中
  leaveCancelled(el) {
    // ...
  }
}
複製代碼

注意事項

1. CSS過渡和動畫能夠同時使用，你能夠進入時用過渡，離開時用動畫，根據本身的需求，選擇合適的配合方式。

2. transition組件要合理的使用，有時原生的可能會更簡單。

transition-group

transition-group是 Vue 提供的多元素/組件的過渡封裝組件。默認狀況下，它不會渲染一個 DOM 元素包裹器，可是能夠經過 tag attribute 來定義。值得咱們注意的是：每一個 <transition-group> 的子節點必須有獨立的 key，動畫才能正常工做。

如何使用

當子節點被更新的時候，會觸發動畫。

使用

<transition-group tag="ul" name="fade">
    <li v-for="item in count" :key="item">
          {{ item }}
    </li>
</transition-group>
複製代碼

當count增長的時候，li也會增長，會觸發動畫。

JavaScript 鉤子

同transition的鉤子同樣使用。

注意事項

1. 必定要定義tag，若是未定義，則不會觸發動畫。

2. move-class - 覆蓋移動過渡期間應用的 CSS 類。

總結

1. 根據本身的需求，合理的使用transitio和transition-group。

2. 使用它們的時候，要考慮到進入和離開的效果。固然，你能夠只定義進入或離開的效果。