Vue3 動畫進入過渡 & 離開過渡

標題：Vue3 動畫進入過渡 & 離開過渡
日期：2022-06-07 09:32:00
toc：false
index_img：https://puep.qpic.cn/coral/Q3auHgzwzM4fgQ41VTF2rPqFqGEyYkuRdiaG2TiaYiaZZYzTR5hq7tVRw/0
category：

前端
tags：
自動
不同
vue
vue3
動畫
過渡
進入
離開
JavaScript

原文：進入過渡 & 離開過渡 | Vue.js，本站僅作保存記錄及調整排版，不做盈利性質的商業行為。

#進入過渡 & 離開過渡#

在插入、更新或從 DOM 中移除項目時，Vue 提供了多種應用轉換效果的方法。這包括以下工具：

自動為 CSS 過渡和動畫應用 class；
集成第三方 CSS 動畫庫，例如 animate.css ；
在過渡鉤子期間使用 JavaScript 直接操作 DOM；
集成第三方 JavaScript 動畫庫。

在這裡，我們只介紹進入、離開的過渡，你也可以從下一節中學習列表過渡和管理過渡狀態。

#單元素 / 組件的過渡#

Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入 / 離開過渡

條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動態組件
組件根節點

這裡是一個典型的例子：

<div id="demo">
  <button @click="show = !show">
    切換
  </button>

  <transition name="fade">
    <p v-if="show">你好</p>
  </transition>
</div>

const Demo = {
  data() {
    return {
      show: true
    }
  }
}

Vue.createApp(Demo).mount('#demo')

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

當插入或刪除包含在 transition 組件中的元素時，Vue 將會做以下處理：

自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加 / 刪除 CSS 類名。
如果過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。
如果沒有找到 JavaScript 鉤子並且也沒有檢測到 CSS 過渡 / 動畫，DOM 操作 (插入 / 刪除) 在下一幀中立即執行。(注意：此處指瀏覽器逐幀動畫機制，和 Vue 的 nextTick 概念不同)

#過渡 class#

在進入 / 離開的過渡中，會有 6 個 class 切換。

v-enter-from：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。
v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡 / 動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
v-enter-to：定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter-from 被移除)，在過渡 / 動畫完成之後移除。
v-leave-from：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡 / 動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
v-leave-to：離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave-from 被移除)，在過渡 / 動畫完成之後移除。

過渡圖示

這裡的每個 class 都將以過渡的名字添加前綴。如果你使用了一個沒有名字的 <transition>，則 v- 是這些 class 名的默認前綴。舉例來說，如果你使用了 <transition name="my-transition">，那麼 v-enter-from 會替換為 my-transition-enter-from。

v-enter-active 和 v-leave-active 可以控制進入 / 離開過渡的不同的緩和曲線，在下面章節會有個示例說明。

Vue3 動畫 進入過渡 & 離開過渡

#進入過渡 & 離開過渡#

#單元素 / 組件的過渡#

#過渡 class#

Vue3 動畫進入過渡 & 離開過渡