Vue動畫詳解

一、Vue動畫概述

Vue.js 是一套構建用戶界面的漸進式框架，提供了強大的模板語法和組件化思想，讓開發者可以輕鬆地構建交互式的應用。此外，Vue 還提供了一個強大的動畫系統 —— Vue Transition，使得在 Vue 應用中使用動畫變得很簡單。

在 Vue 中，每一個動畫都要包裹在一個 <transition> 標籤中。當其包裹的元素髮生改變時，Vue 將自動創建過渡效果。過渡效果由兩部分組成 —— 進入過渡和離開過渡。

可以在 <transition> 中通過定義多個 CSS 類名，來控制進入過渡和離開過渡的具體行為。例如，在元素被添加到 DOM 中時，Vue 會自動為其添加 v-enter 類名。對應地，在元素被移除時，Vue 會自動為其添加 v-leave 類名。我們可以使用這些類名來定義具體的過渡行為。

二、Vue動畫CSS類名

以下列出了 Vue 過渡的所有 CSS 類名。這些類名都會動態地在過渡中被添加和移除，可以通過 CSS 來定義具體的過渡效果。

v-enter：定義進入過渡的開始狀態。
v-enter-active：定義進入過渡的結束狀態。
v-enter-to：2.1.8 版本及以上定義進入過渡的結束狀態。（相當於 v-enter-active，為了解決動畫結束後無法移除過渡類名的問題）
v-leave：定義離開過渡的開始狀態。
v-leave-active：定義離開過渡的結束狀態。
v-leave-to：2.1.8 版本及以上定義離開過渡的結束狀態。（相當於 v-leave-active，為了解決動畫結束後無法移除過渡類名的問題）

三、Vue動畫實例

下面是一個簡單的 Vue 動畫示例。在這個示例中，文字在進入和離開時會有淡入淡出的效果：

<template>
  <div>
    <button @click="showText = !showText">Toggle</button>
    <transition name="fade">
      <p v-if="showText">Hello World</p>
    </transition>
  </div>
</template>

<style>
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
</style>

<script>
export default {
  data() {
    return {
      showText: true
    }
  }
}
</script>

在上面的代碼中，我們首先定義了一個按鈕，點擊該按鈕可以切換 showText 變量的值。然後，我們將  元素包裹在了 <transition> 標籤中，指定了其 name 屬性為 “fade”。這個 name 屬性將用於在 CSS 中選擇性地定義過渡效果。

接着，我們在 CSS 中定義了兩個類名。當元素進入和離開時，Vue 會根據這兩個類名來動態地添加和刪除特定的類名。定義了這兩個類名後，我們將它們應用到了我們定義的 <transition> 標籤上。這樣，在  元素進入和離開時，就會自動觸發相應的過渡效果。

最後，我們通過 data 函數將 showText 變量設置成了 true。這樣，在應用初始加載時， 元素就會被正確地渲染出來。

四、Vue動畫高級應用

在實際應用中，我們可能需要更加複雜的動畫效果。Vue 動畫支持多種高級應用，例如：

自定義 CSS 過渡類名。
同時使用多個並行過渡。
使用內置的 JavaScript 鉤子函數。
使用自定義 JavaScript 鉤子函數。

在這裡，我們以自定義 CSS 過渡類名為例，展示 Vue 動畫的高級應用：

<template>
  <div>
    <button @click="showText = !showText">Toggle</button>
    <transition enter-active-class="animated swing" leave-active-class="animated bounce">
      <p v-if="showText">Hello World</p>
    </transition>
  </div>
</template>

<style>
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.swing {
  animation-name: swing;
}

.bounce {
  animation-name: bounceOut;
}
</style>

<script>
export default {
  data() {
    return {
      showText: true
    }
  }
}
</script>

在上面的代碼中，我們首先定義了一個按鈕和一個 <transition> 標籤，其 enter-active-class 和 leave-active-class 屬性分別為 “animated swing” 和 “animated bounce”。這樣，我們就自定義了過渡時的 CSS 類名。

接着，我們在 CSS 中定義了兩個類名：”animated” 和 “swing”。這兩個類名分別用於定義進入過渡和離開過渡的動畫效果。需要注意的是，我們還要定義 “animation-duration” 和 “animation-fill-mode” 屬性，以確保動畫能夠正確地運行。

最後，我們將 showText 變量初始化為 true，並在  元素中通過 v-if 指令控制元素的顯示和隱藏。這樣，當 showText 變量為 true 時， 元素就會被正確地渲染出來，並播放自定義的過渡動畫。

五、Vue動畫總結

在本文中，我們對 Vue 動畫進行了詳細的解釋與說明。我們介紹了 Vue 動畫的概述、CSS 類名、使用示例以及高級應用。在實際應用中，Vue 動畫非常靈活，能夠輕鬆實現各種複雜的動畫效果。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/301840.html