晚上好，各位动画爱好者！我是你们今晚的 Vue 3 动画向导。今天我们要深入挖掘一下 Vue 3 渲染器是如何像变魔术一样处理 <Transition> 和 <TransitionGroup> 这两个动画组件的，保证让你的页面动起来、炫起来！
首先，我们要明确一个概念：Vue 3 的渲染器，它不仅仅是把数据变成 DOM 这么简单，它还负责管理组件的生命周期，特别是动画相关的生命周期。<Transition> 和 <TransitionGroup> 正是利用这些生命周期钩子，加上一些巧妙的类名切换，才能实现各种流畅的动画效果。
一、<Transition>：单元素动画的艺术
<Transition> 组件主要用于单个元素的过渡动画。它的核心思想是：当被包裹的元素进入或离开 DOM 时，根据不同的生命周期阶段，应用不同的 CSS 类名，从而触发 CSS 过渡或动画。
-
类名约定：
<Transition>组件默认会根据它的nameprop 生成一系列 CSS 类名。例如，如果你的name是 "fade"，那么它会生成以下类名：类名 何时应用 fade-enter-from进入过渡的起始状态。在元素插入 DOM 之前，立即添加这个类名。然后，Vue 会等待一帧，移除这个类名，添加 fade-enter-active。fade-enter-active进入过渡的激活状态。这个类名会在整个进入过渡期间保持。你可以在 CSS 中定义 transition属性，控制过渡效果。fade-enter-to进入过渡的结束状态。在元素插入 DOM 之后，下一帧移除 fade-enter-from，添加这个类名。在transition结束后，会移除fade-enter-active和fade-enter-to。fade-leave-from离开过渡的起始状态。当离开过渡开始时，立即添加这个类名。 fade-leave-active离开过渡的激活状态。这个类名会在整个离开过渡期间保持。同样，你可以在 CSS 中定义 transition属性。fade-leave-to离开过渡的结束状态。在离开过渡开始后，下一帧移除 fade-leave-from，添加这个类名。在transition结束后，会移除fade-leave-active和fade-leave-to。这些类名是默认的，你也可以通过
enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class、leave-to-class这些 props 自定义类名。 -
渲染器如何工作？
当
<Transition>组件渲染时，Vue 3 的渲染器会监听被包裹元素的插入和移除。简单来说，流程是这样的：-
进入过渡：
- 当元素需要插入 DOM 时，渲染器会先添加
fade-enter-from类名。 - 然后，Vue 会利用
requestAnimationFrame(或者setTimeout如果不支持) 强制浏览器进行一次重绘，目的是让浏览器“意识到”fade-enter-from已经添加了。 - 在下一帧，渲染器会移除
fade-enter-from，添加fade-enter-to和fade-enter-active类名。 - CSS 过渡开始执行。
- 当过渡结束后，渲染器会移除
fade-enter-active和fade-enter-to类名。
- 当元素需要插入 DOM 时，渲染器会先添加
-
离开过渡：
- 当元素需要从 DOM 中移除时，渲染器会立即添加
fade-leave-from类名。 - 同样，Vue 会利用
requestAnimationFrame强制浏览器进行一次重绘。 - 在下一帧，渲染器会移除
fade-leave-from，添加fade-leave-to和fade-leave-active类名。 - CSS 过渡开始执行。
- 当过渡结束后，渲染器会移除
fade-leave-active和fade-leave-to类名，并从 DOM 中移除元素。
- 当元素需要从 DOM 中移除时，渲染器会立即添加
代码示例：
<template> <div> <button @click="show = !show">Toggle</button> <Transition name="fade"> <p v-if="show">Hello, Transition!</p> </Transition> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const show = ref(false); return { show }; } }; </script> <style> .fade-enter-from { opacity: 0; } .fade-enter-active { transition: opacity 0.5s ease; } .fade-enter-to { opacity: 1; } .fade-leave-from { opacity: 1; } .fade-leave-active { transition: opacity 0.5s ease; } .fade-leave-to { opacity: 0; } </style>在这个例子中，当
show变量改变时，p元素会淡入或淡出。CSS 类名fade-enter-from、fade-enter-active、fade-enter-to和fade-leave-from、fade-leave-active、fade-leave-to定义了过渡的起始、激活和结束状态。 -
-
JavaScript 钩子：
除了 CSS 类名，
<Transition>组件还提供了 JavaScript 钩子，让你可以在过渡的不同阶段执行 JavaScript 代码。钩子名称 何时触发 before-enter在元素插入 DOM 之前立即触发。 enter在元素插入 DOM 时触发。可以接收两个参数： el(要过渡的元素) 和done(一个回调函数，在过渡完成后调用)。如果你使用了 JavaScript 动画，需要手动调用done。after-enter在进入过渡结束后触发。 enter-cancelled在进入过渡被取消时触发。例如，当元素在进入过渡过程中被移除时。 before-leave在离开过渡开始之前触发。 leave在离开过渡开始时触发。同样接收 el和done参数。after-leave在离开过渡结束后触发。 leave-cancelled在离开过渡被取消时触发。 代码示例：
<template> <div> <button @click="show = !show">Toggle</button> <Transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @leave="leave" @after-leave="afterLeave" > <p v-if="show">Hello, Transition!</p> </Transition> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const show = ref(false); const beforeEnter = (el) => { console.log('beforeEnter', el); }; const enter = (el, done) => { console.log('enter', el); // 使用 JavaScript 动画 gsap.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.5, onComplete: done }); }; const afterEnter = (el) => { console.log('afterEnter', el); }; const leave = (el, done) => { console.log('leave', el); // 使用 JavaScript 动画 gsap.fromTo(el, { opacity: 1 }, { opacity: 0, duration: 0.5, onComplete: done }); }; const afterLeave = (el) => { console.log('afterLeave', el); }; return { show, beforeEnter, enter, afterEnter, leave, afterLeave }; } }; </script> <style> /* 可以移除 CSS 过渡，因为我们使用了 JavaScript 动画 */ </style>在这个例子中，我们使用了
gsap(GreenSock Animation Platform) 库来实现动画。注意，在enter和leave钩子中，我们需要手动调用done回调函数，告诉 Vue 过渡已经完成。
二、<TransitionGroup>：列表动画的奇妙旅程
<TransitionGroup> 组件用于列表的过渡动画。它与 <Transition> 的区别在于，<TransitionGroup> 可以同时处理多个元素的过渡，并且它会为每个元素生成一个唯一的 key。
-
渲染器的特殊处理：
<TransitionGroup>组件的渲染方式与<Transition>有一些不同。- 需要
key：<TransitionGroup>内部的每个元素都需要一个唯一的keyprop。Vue 使用这些 key 来追踪元素的身份，从而正确地应用过渡效果。 - 默认渲染为
<span>：<TransitionGroup>默认渲染为一个<span>元素。你可以通过tagprop 指定不同的标签。 move-class：<TransitionGroup>还提供了一个move-classprop，用于定义元素在列表中的位置发生变化时的过渡效果。
- 需要
-
类名约定：
与
<Transition>类似，<TransitionGroup>也会根据nameprop 生成一系列 CSS 类名，但它只生成enter和leave相关的类名，以及一个额外的move类名：类名 何时应用 fade-enter-from进入过渡的起始状态。 fade-enter-active进入过渡的激活状态。 fade-enter-to进入过渡的结束状态。 fade-leave-from离开过渡的起始状态。 fade-leave-active离开过渡的激活状态。 fade-leave-to离开过渡的结束状态。 fade-move当元素在列表中移动时应用。你需要使用 transform属性来实现移动动画。代码示例：
<template> <div> <button @click="addItem">Add Item</button> <button @click="removeItem">Remove Item</button> <TransitionGroup name="list" tag="ul" class="list"> <li v-for="item in items" :key="item.id" class="list-item"> {{ item.text }} </li> </TransitionGroup> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const items = ref([ { id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }, { id: 3, text: 'Item 3' } ]); let nextId = 4; const addItem = () => { items.value.push({ id: nextId++, text: `Item ${nextId - 1}` }); }; const removeItem = () => { if (items.value.length > 0) { items.value.pop(); } }; return { items, addItem, removeItem }; } }; </script> <style> .list { list-style: none; padding: 0; } .list-item { margin-bottom: 10px; background-color: #f0f0f0; padding: 10px; } .list-enter-from { opacity: 0; transform: translateY(-20px); } .list-enter-active { transition: all 0.5s ease; } .list-enter-to { opacity: 1; transform: translateY(0); } .list-leave-from { opacity: 1; } .list-leave-active { transition: all 0.5s ease; position: absolute; /* 关键：使用绝对定位让元素脱离文档流 */ } .list-leave-to { opacity: 0; transform: translateY(-20px); } .list-move { transition: transform 0.5s ease; } </style>在这个例子中，当添加或删除列表项时，元素会淡入或淡出，并且会向上或向下移动。
list-move类名定义了元素在列表中移动时的过渡效果。注意
position: absolute的使用！ 在list-leave-active类中，我们设置了position: absolute。这是因为，当元素离开 DOM 时，我们需要让它脱离文档流，避免影响其他元素的位置。如果不使用绝对定位，删除元素会导致其他元素立即向上移动，过渡效果会显得很生硬。 -
JavaScript 钩子：
<TransitionGroup>也支持 JavaScript 钩子，与<Transition>类似。钩子名称 何时触发 before-enter在元素插入 DOM 之前立即触发。 enter在元素插入 DOM 时触发。 after-enter在进入过渡结束后触发。 enter-cancelled在进入过渡被取消时触发。 before-leave在离开过渡开始之前触发。 leave在离开过渡开始时触发。 after-leave在离开过渡结束后触发。 leave-cancelled在离开过渡被取消时触发。 使用方式与
<Transition>相同，这里就不再赘述了。
三、渲染器内部的实现细节 (简化版)
虽然我们无法完全窥探 Vue 3 渲染器的源代码，但我们可以大致了解一下它是如何处理这些动画钩子和类名切换的。
-
虚拟 DOM 的 Diff 算法：
Vue 3 使用虚拟 DOM 来进行高效的 DOM 更新。当组件的状态发生变化时，Vue 会创建一个新的虚拟 DOM 树，然后与旧的虚拟 DOM 树进行比较 (diff)。Diff 算法会找出需要更新的节点，并生成一系列的 DOM 操作指令 (例如，插入、移除、更新节点)。
-
patch函数：patch函数是 Vue 3 渲染器的核心函数之一。它负责将虚拟 DOM 的变化应用到实际的 DOM 上。当patch函数遇到<Transition>或<TransitionGroup>组件时，它会执行以下操作：-
进入过渡：
- 在插入节点之前，触发
beforeEnter钩子 (如果定义了)。 - 添加
*-enter-from类名。 - 使用
requestAnimationFrame强制重绘。 - 移除
*-enter-from类名，添加*-enter-active和*-enter-to类名。 - 监听
transitionend事件，当过渡结束后，移除*-enter-active和*-enter-to类名，并触发afterEnter钩子 (如果定义了)。
- 在插入节点之前，触发
-
离开过渡：
- 在移除节点之前，触发
beforeLeave钩子 (如果定义了)。 - 添加
*-leave-from类名。 - 使用
requestAnimationFrame强制重绘。 - 移除
*-leave-from类名，添加*-leave-active和*-leave-to类名。 - 监听
transitionend事件，当过渡结束后，移除*-leave-active和*-leave-to类名，并从 DOM 中移除节点，触发afterLeave钩子 (如果定义了)。
- 在移除节点之前，触发
-
move过渡 (仅<TransitionGroup>)：- 在元素的位置发生变化时，添加
*-move类名。 - 监听
transitionend事件，当过渡结束后，移除*-move类名。
- 在元素的位置发生变化时，添加
-
-
requestAnimationFrame的作用：requestAnimationFrame的作用至关重要。它确保类名的添加和移除操作在浏览器的下一次重绘之前执行。这可以避免浏览器优化，导致过渡效果失效。如果没有
requestAnimationFrame，浏览器可能会将多个 DOM 操作合并成一次重绘，导致 CSS 过渡无法正确触发。
总结：
<Transition> 和 <TransitionGroup> 组件是 Vue 3 中强大的动画工具。它们通过巧妙的类名切换和 JavaScript 钩子，让你能够轻松地实现各种过渡效果。理解它们的原理，可以帮助你更好地控制动画，创造出更流畅、更吸引人的用户界面。
记住，动画不仅仅是让页面动起来，更重要的是通过动画来改善用户体验，引导用户，让用户感受到你的用心。希望今天的讲解对你有所帮助！ 祝大家动画玩得开心！