编辑“︁Vue.js 进入离开过渡”︁（章节）

= Vue.js 进入/离开过渡 =

'''Vue.js 进入/离开过渡'''是 Vue.js 提供的一种动画机制，用于在元素插入或移除 DOM 时应用平滑的过渡效果。通过结合 CSS 过渡或 JavaScript 动画，开发者可以轻松实现元素的淡入淡出、滑动、缩放等视觉效果，提升用户体验。

== 基本概念 ==

在 Vue.js 中，进入/离开过渡通过 `<transition>` 组件实现。当以下条件满足时，Vue 会自动应用过渡效果：
* 元素通过 `v-if` 或 `v-show` 控制显示/隐藏
* 动态组件切换（使用 `<component :is="...">`）
* 列表渲染中的元素变化（结合 `<transition-group>`）

Vue 的过渡系统会在适当的时机自动添加/移除 CSS 类名，开发者只需定义这些类名对应的样式即可。

== 工作原理 ==

Vue.js 的过渡过程分为 6 个阶段，对应 6 个 CSS 类名：

<mermaid>
graph LR
    A[v-enter-from] --> B[v-enter-active]
    B --> C[v-enter-to]
    D[v-leave-from] --> E[v-leave-active]
    E --> F[v-leave-to]
</mermaid>

1. '''v-enter-from'''：进入动画的起始状态
2. '''v-enter-active'''：进入动画的激活状态（定义过渡持续时间、缓动函数等）
3. '''v-enter-to'''：进入动画的结束状态
4. '''v-leave-from'''：离开动画的起始状态
5. '''v-leave-active'''：离开动画的激活状态
6. '''v-leave-to'''：离开动画的结束状态

== 基本示例 ==

以下是一个简单的淡入淡出过渡示例：

<syntaxhighlight lang="html">
<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition name="fade">
      <p v-if="show">Hello Vue!</p>
    </transition>
  </div>
</template>

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

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

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

'''代码解释'''：
1. 点击按钮切换 `show` 的值
2. 当 `show` 为 `true` 时，`<p>` 元素会应用淡入效果
3. 当 `show` 为 `false` 时，`<p>` 元素会应用淡出效果
4. CSS 定义了过渡的起始/结束状态和动画属性

== 自定义过渡类名 ==

Vue 允许自定义过渡类名，方便与第三方动画库（如 Animate.css）集成：

<syntaxhighlight lang="html">
<transition
  enter-active-class="animate__animated animate__bounceIn"
  leave-active-class="animate__animated animate__bounceOut"
>
  <p v-if="show">使用 Animate.css 的动画</p>
</transition>
</syntaxhighlight>

== JavaScript 钩子 ==

除了 CSS 过渡，Vue 还提供了 JavaScript 钩子函数实现更复杂的动画：

<syntaxhighlight lang="html">
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <!-- 内容 -->
</transition>
</syntaxhighlight>

示例实现：

<syntaxhighlight lang="javascript">
methods: {
  beforeEnter(el) {
    el.style.opacity = 0
    el.style.transform = 'translateX(100px)'
  },
  enter(el, done) {
    anime({
      targets: el,
      opacity: 1,
      translateX: 0,
      duration: 500,
      complete: done
    })
  }
}
</syntaxhighlight>

== 列表过渡 ==

对于 `v-for` 渲染的列表，使用 `<transition-group>` 实现每个元素的过渡效果：

<syntaxhighlight lang="html">
<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>
</syntaxhighlight>

== 实际应用案例 ==

'''场景'''：电商网站购物车商品添加/移除动画

<syntaxhighlight lang="html">
<transition-group name="cart-item" tag="div">
  <div v-for="item in cart" :key="item.id" class="cart-item">
    <img :src="item.image" :alt="item.name">
    <span>{{ item.name }}</span>
    <button @click="removeFromCart(item.id)">×</button>
  </div>
</transition-group>

<style>
.cart-item-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.cart-item-enter-active {
  transition: all 0.3s ease;
}

.cart-item-leave-active {
  transition: all 0.3s ease;
  position: absolute;
}

.cart-item-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.cart-item-move {
  transition: transform 0.3s ease;
}
</style>
</syntaxhighlight>

== 性能优化建议 ==

1. 尽量使用 CSS 过渡而非 JavaScript 动画
2. 对 `transform` 和 `opacity` 属性做动画（这些属性不会触发重排）
3. 避免同时动画大量元素
4. 使用 `will-change` 属性提示浏览器优化：
   <syntaxhighlight lang="css">
   .animated-element {
     will-change: transform, opacity;
   }
   </syntaxhighlight>

== 数学原理 ==

CSS 过渡基于缓动函数（easing functions），常见的缓动函数包括：

* 线性过渡：<math>f(t) = t</math>
* 缓入（ease-in）：<math>f(t) = t^2</math>
* 缓出（ease-out）：<math>f(t) = 1 - (1 - t)^2</math>
* 标准缓动（ease-in-out）：<math>f(t) = \begin{cases} 
2t^2 & \text{当 } 0 \leq t < 0.5 \\
1 - 2(1 - t)^2 & \text{当 } 0.5 \leq t \leq 1 
\end{cases}</math>

== 总结 ==

Vue.js 的进入/离开过渡系统提供了一种声明式的方式来实现元素显示/隐藏时的动画效果。通过合理使用 CSS 过渡或 JavaScript 动画钩子，开发者可以创建流畅的用户界面交互。关键点包括：

1. 理解 Vue 的过渡类名生命周期
2. 掌握 CSS 过渡的基本写法
3. 了解如何与第三方动画库集成
4. 学会处理列表过渡的特殊情况
5. 注意动画性能优化

通过本文的学习，开发者应该能够在实际项目中灵活应用 Vue.js 的过渡系统，创建更加动态、吸引人的用户界面。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js过渡与动画]]